Question

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

我想使用类名来合并为MyButton定义的const根样式（我已经在沙箱中删除了它，但它设置了颜色，图标等）和可以基于传入的prop定义的动态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

希望获得帮助

使用类名基于props值通过CSS动态设置组件样式

1 个答案: