Material-UI Backstage 中 `withStyles` 的主题覆盖？

Question

如何覆盖 Material-UI 中已通过 withStyles 应用样式的组件的主题？

当我查看有问题的组件时，我在 DOM 中看到以下内容：

我正在尝试重新设计 Backstage 的样式并正在查看 MuiSelect 组件。 Backstage 通过用 withStyles 覆盖 CSS 来调整 MuiSelect 的样式。查看 DOM 我正在尝试调整通过 WithStyles(ForwardRef(InputBase))-input-75764 class.

应用的 CSS

在Backstage的Select.tsx组件文件中，样式是这样定义的：

const BootstrapInput = withStyles((theme: Theme) =>
  createStyles({
    root: {
      'label + &': {
        marginTop: theme.spacing(3),
      },
    },
    input: {
      borderRadius: 4,
      position: 'relative',
      backgroundColor: theme.palette.background.paper,
      border: '1px solid #ced4da',
      fontSize: 16,
      padding: '10px 26px 10px 12px',
      transition: theme.transitions.create(['border-color', 'box-shadow']),
      fontFamily: 'Helvetica Neue',
      '&:focus': {
        background: theme.palette.background.paper,
        borderRadius: 4,
      },
    },
  }),
)(InputBase);

如何使用 Material-UIs createTheme 定位这些样式？

Answer 1

有一个 guide here 关于如何覆盖命名 Backstage 组件的样式。

对于没有可用覆盖名称的 Backstage 组件，可以添加它们 such as in this pull request。

Material-UI Backstage 中 `withStyles` 的主题覆盖？

Material-UI Theme Overrides for `withStyles` in Backstage?

material-ui

backstage