Question

我将道具传递给按钮组件：

const StoreButton = ({ storeColor }) => {
  const borderBottom = `solid 3px ${storeColor}`;
  const classes = useStyles({ borderBottom });

  return (
    <Button variant="outlined" size="small" className={classes.button}>
      Store
    </ Button>
  )
};

我先在类中使用borderBottom属性，然后再使用它。我想在makeStyles内部构造属性，但这会导致错误：

const useStyles = makeStyles(theme => ({
  button: {
    borderBottom: props => props.borderBottom,
    // borderBottom: `solid 3px ${props => props.borderBottom}`; // function is pasted in
  },
}));

如果我在makeStyles中构造CSS速记，它将创建solid 3px solid 3px function(props){return props.borderBottom;}。当我在Chrome中检查它时。因此，这种样式无效。

是否有一种方法可以将prop传递给CSS速记属性，而无需在makeStyles之外创建它的解决方法？

Answer 1

您几乎是对的，唯一要更改的是：

borderBottom: props => `1px solid ${props.color}`,

现在，该值是一个适当的函数。在函数内部，它构造正确的字符串值。

将道具传递给makeStyles并在Material UI中的CSS速记属性中使用

1 个答案: