javascript - 将道具传递给 makeStyles 并在 Material UI 中的 CSS 速记属性中使用
问题描述
我将道具传递给按钮组件:
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 中检查它时。因此,这种方式的样式是无效的。
有没有办法将道具传递给 CSS 速记属性,而无需在 makeStyles 之外创建它?
解决方案
你几乎做对了,唯一需要改变的是:
borderBottom: props => `1px solid ${props.color}`,
现在这个值是一个适当的函数。在函数内部,它构造了正确的字符串值。
推荐阅读
- python - 如何连接两个numpy数组
- python - SQL 的 Python 抽象层
- c# - 无法加载文件或程序集“System.Net.Http.Formatting”
- jmeter - jmeter kafka消费者抛出错误为[ClassCastException:[Ljava.lang.String; 无法转换为 java.util.List]
- tsql - SSMS - 自动完成参数(智能感知)
- r - R:堆叠条形图的ggplot,绘图和自动调整
- javascript - Javascript:如何在新窗口中安全地打开用户提供的 URL
- java - 在 Hibernate Query 中为一个特定属性生成错误
- angularjs - 当我从数据库中获取轴值时,Highchart 不工作
- javascript - 禁用输入范围的键盘使用