Question

我正在使用内联样式来覆盖React中Material-UI组件的样式。最近，我意识到使用CSS是一种更加有条理和更好的样式组件样式。我已经在material-ui用户指南中引用了所有文档。但是找不到解决方案。

工作代码：

const useStyles = theme => ({
   input: {
     color: '#000',
     fontSize: "14px",
   },
});

Class的内部渲染方法。

const { classes } = this.props;

<TextField
    InputProps={{
      className: classes.input
    }}
    InputLabelProps={{
      className: classes.input
    }}

 />

export default withStyles(useStyles)(MyClass);

我想使用CSS覆盖样式，如下所示：

CSS文件：

     .input {
        color: #ffffff;
         font-size: 18px;
      }

InputProps={{
          className: "input"
        }}

我该如何实现？谢谢。

Answer 1

使用CSS文件和常规的className可以覆盖material-UI组件的样式，但是CSS的特殊性很重要。根据{{3}}：

默认情况下，样式标签最后注入到页面的<head>元素中。它们比您页面上的任何其他样式标签更具特异性。 CSS模块，样式化的组件。

StylesProvider组件具有一个injectFirst道具，可以将样式标签首先插入头部（优先级较低）。

import { StylesProvider } from '@material-ui/styles';

<StylesProvider injectFirst>
  {/* Your component tree.
      Styled components can override Material-UI's styles. */}
</StylesProvider>

如何在React中使用Material-ui将内联样式更改为CSS？

1 个答案: