使用类名根据 props 值使用 CSS 动态设置组件样式

Question

我正在创建一组使用 CSS 进行样式设置的可重用组件（包装材料用户界面）。我需要通过传递给自定义按钮的道具动态设置组件的宽度。

我想使用类名来合并为 MyButton 定义的 const 根样式（我已经在沙箱中将其剥离了，但它设置了颜色、图标等）和可以根据传入的道具定义的动态 sizeStyle。

  const sizeStyle: JSON =  { minWidth: "300px !important"};


  //always apply the buttonstyle, only apply the size style if a width prop has been supplied
  const rootStyle: Object = classNames({
    buttonStyle: true,
    sizeStyle: props.width
  ///});   

我不明白为什么样式没有应用于页面上有一个道具通过的第一个按钮 - 我可以在控制台上看到应该应用这两种样式。

沙盒在这里：https : //codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-36w4r

TIA

Answer 1

您需要传递props给您的useStyles(props)函数，然后在此内部您可以使用props样式组件。

文档链接：https : //material-ui.com/styles/basics/#adapting-based-on-props

// eslint-disable-next-line flowtype/no-weak-types
const useStyles = makeStyles({
  root: {
    //    minWidth: "300px !important",
    color: "#565656",
    backgroundColor: "salmon",
    borderRadius: 2,
    textTransform: "none",
    fontFamily: "Arial",
    fontSize: 16,
    letterSpacing: "89%", //'0.09em',
    boxShadow:
      "0px 1px 5px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px -2px rgba(0,0,0,0.12)",
    "&:disabled": {
      color: "#565656",
      opacity: 0.3,
      backgroundColor: "#fbb900"
    },
    minWidth: props => `${props.width}px`,
  },
  label: {
    textTransform: "capitalize",
    display: "flex",
    whiteSpace: "nowrap"
  }
});

// eslint-disable-next-line flowtype/require-return-type
function MyButton(props) {
  const { children, ...others } = props;
  const classes = useStyles(props);

  return (
    <Button
      {...props}
      classes={{
        root: classes.root,
        label: classes.label
      }}
    >
      {children}
    </Button>
  );
}

沙箱中的修改版本：https : //codesandbox.io/s/css-styling-custom-muibutton-width-as-prop-pcdgk? fontsize =14& hidenavigation =1& theme =dark

希望这有帮助