将道具传递给 makeStyles 并在 CSS shorthand 属性 中使用 Material UI
Pass props to makeStyles and use in CSS shorthand property in Material UI
我将道具传递给按钮组件:
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 shorthand,它会创建 solid 3px solid 3px function(props){return props.borderBottom;}
。当我在 Chrome 中检查它时。因此,这样的样式是无效的。
有没有一种方法可以将 props 传递给 CSS shorthand 属性,而无需在 makeStyles 之外创建它的解决方法?
你几乎是对的,唯一需要改变的是:
borderBottom: props => `1px solid ${props.color}`,
现在这个值是一个合适的函数。它在函数内部构造正确的字符串值。
我将道具传递给按钮组件:
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 shorthand,它会创建 solid 3px solid 3px function(props){return props.borderBottom;}
。当我在 Chrome 中检查它时。因此,这样的样式是无效的。
有没有一种方法可以将 props 传递给 CSS shorthand 属性,而无需在 makeStyles 之外创建它的解决方法?
你几乎是对的,唯一需要改变的是:
borderBottom: props => `1px solid ${props.color}`,
现在这个值是一个合适的函数。它在函数内部构造正确的字符串值。