material-ui 用 useStyles / jss 覆盖主题答案

【问题标题】：material-ui overwrite theme with useStyles / jssmaterial-ui 用 useStyles / jss 覆盖主题
【发布时间】：2020-04-14 16:28:56
【问题描述】：

如何在不使用 !important 的情况下使用样式覆盖 Material-UI 主题？

const theme = createMuiTheme({
  overrides: {
     MuiInputBase: {
      input: {
        background: '#dd7711',
        padding: 10,
      },
     },
    },
  },
})

export default makeStyles(theme => ({
  hutber: {
    background: '#000',
    color: '#fff',
  },
}))


function SpacingGrid() {
   const classes = useStyles()
   return <MuiThemeProvider theme={theme}><Input label="Outlined" variant="outlined" className={classes.hutber} /></MuiThemeProvider>
}

输出：

如您所见，覆盖样式的唯一方法是创建另一个主题：O 我想知道styles

【问题讨论】：

标签： javascript reactjs material-ui jss

【解决方案1】：

覆盖不起作用的原因是因为指定 className 属性等同于指定 root CSS class for Input，但是您的主题覆盖在 input CSS 类上，该类应用于不同的元素（根元素是 div，输入元素是该 div 中的 <input> 元素。

在下面的示例中，您可以看到两种不同的定位<input> 元素的方法。第一种方法使用nested selector 来定位.MuiInputBase-input。第二种方法使用classes 属性（而不是className）并提供覆盖作为input CSS 类。

import React from "react";
import ReactDOM from "react-dom";

import {
  createMuiTheme,
  MuiThemeProvider,
  makeStyles
} from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        background: "#dd7711",
        padding: 10
      }
    }
  }
});

const useStyles = makeStyles(theme => ({
  hutber: {
    "& .MuiInputBase-input": {
      background: "#000",
      color: "#fff"
    }
  },
  alternateApproach: {
    background: "#000",
    color: "#fff"
  }
}));

function App() {
  const classes = useStyles();
  return (
    <MuiThemeProvider theme={theme}>
      <Input defaultValue="Without overrides" variant="outlined" />
      <br />
      <br />
      <Input
        defaultValue="With overrides"
        variant="outlined"
        className={classes.hutber}
      />
      <br />
      <br />
      <Input
        defaultValue="Alternate approach"
        variant="outlined"
        classes={{ input: classes.alternateApproach }}
      />
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【讨论】：