我将道具传递给按钮组件:
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之外创建它的解决方法?
最佳答案
您几乎是对的,唯一要更改的是:
borderBottom: props => `1px solid ${props.color}`,
现在,该值是一个适当的函数。在函数内部,它构造正确的字符串值。