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

【问题标题】：Pass props to makeStyles and use in CSS shorthand property in Material UI将道具传递给 makeStyles 并在 Material UI 中的 CSS 速记属性中使用
【发布时间】：2020-01-10 12:24:32
【问题描述】：

我将 props 传递给按钮组件：

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 中检查它时。因此，这种方式的样式是无效的。

有没有办法将 props 传递给 CSS 速记属性，而无需在 makeStyles 之外创建它？

【问题讨论】：

标签： javascript css reactjs material-ui jss

【解决方案1】：

你几乎做对了，唯一需要改变的是：

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

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

【讨论】：