Material-UI 样式按钮变体概述答案

【问题标题】：Material-UI styling the button variant outlinedMaterial-UI 样式按钮变体概述
【发布时间】：2021-03-14 05:22:22
【问题描述】：

我是 Material UI 的新手，我正在苦苦挣扎。我有一个按钮组件

export default function TheButton(props: PropsWithChildren<Props>) {
  const { className, hover, level,...rest } = props;

  const classes = useStyles();

  return (
    <Button
      {...rest}
      className={clsx(classes.root, className, hover === 'contained' && classes.hoverContained)}
    >
      {props.children}
    </Button>
  );
}

从这个组件中，我想有两个变体：包含和概述。这是我的概述按钮。

<TheButton
      variant="outlined"
      color="secondary"
    >
      secondary
</TheButton>

When the variant outlined is selected the button has the class Muibutton-outlined.我想覆盖此类以更改边框（仅在概述的变体中，因此仅在此类上）。到目前为止，我已经尝试过类似的东西：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    '.MuiButton-outlinedSecondary':{ 
      border:"2px solid red" ,
    },
  }
)

它不起作用。

【问题讨论】：

请使用 Codesandbox 创建一个演示。

标签： css reactjs material-ui

【解决方案1】：

我有类似的设置，我试过了：

向我的按钮组件添加一个类submit

<Button
 type="submit"
 variant="outlined"
 disabled={isSaving || invalid || unchanged}
 color="secondary"
 className={classes.submit}
>
  SAVE CHANGES
</Button>

因为我有 submit 类，所以我的样式可以更精确，如下所示：

const useStyles = makeStyles({
  submit: {
    marginTop: padding.medium,
    marginLeft: padding.small,
    '&.MuiButton-outlinedSecondary': {
      border: '1px solid pink',
    },
  },
});

结果如下：

Material-ui button with pink border image

【讨论】：

【解决方案2】：

只要我使用过 Ant design ui kit 并且我已经覆盖了它的默认样式，如下所示：

<Button type="primary" className={styles.custom_css}>click</Button>

这已在 react 中完成，custom_css 类默认覆盖其样式

这可能对你有帮助，如果没有，请告诉我

【讨论】：