如何覆盖 mui class？

Question

我正在尝试覆盖 material ui 组件上的默认 class，但我无法将其作为目标。有人可以帮我定位吗？

我的风格：

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
          '& .MuiCardContent-root:last-child': {
           padding: '0px'
        }
    }),
);

我正在尝试覆盖的 class（如您所见，我覆盖的样式未应用）：

干杯

Answer 1

1- 在您的 App.js 文件中 import { ThemeProvider } from "@material-ui/styles"

2- 创建您的客户覆盖样式

const yourCustomTheme = {
      MuiCardContent :{
        root:{
           "&:last-child": {
            padding: '0px'
          },
        }
      }
    }

3- 用这个包裹你的所有代码

<ThemeProvider theme={createMuiTheme({ ...yourCustomTheme })}>
   Route and stuff ...
</ThemeProvider>

Answer 2

这就是我最终解决问题的方式：在单独的 styles.js 文件中：

assessmentPanelContent: {
    '&.MuiCardContent-root': {
      display: 'flex',
      padding: '0px',
      flexWrap: 'wrap',
      paddingBottom: '0px'
    }
  }

然后我只是将我的自定义 class 应用到该元素，我的自定义 class 和我想要覆盖的 MUI class 的组合能够覆盖 MUI class' 样式。

Answer 3

我终于让它工作了！我的解决方案很像@Soroush 的回答，除了我想在 MUI 组件上使用自定义 classes。

我的解决方案：

AppTheme.js

解决方案在主题对象的 h2 node 中，我在其中添加了自定义 class .page-title。我可以简化它以仅显示我的解决方案，但我会留下一些额外的属性来演示您还可以做什么。

// You can define device sizes and use it in your theme object
const allDevices = "@media (min-width:320px) and  (max-width: 1024px)";
const allPhones = "@media (min-width:320px) and  (max-width: 767px)";
const portraitPhones = "@media (min-width:320px) and  (max-width: 480px)";
const landscapePhones = "@media (min-width:481px) and  (max-width: 767px)";
const tablets = "@media (min-width:768px) and  (max-width: 1024px)";

const MuiTheme = {
  palette: {
    primary: { main: "#E54E55" },
    secondary: { main: "#26B1EF" },
  },
  typography: {
    fontFamily: [
      "Montserrat",
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
    ].join(","),
    h1: {
      fontSize: "4rem",
      fontWeight: "700",
      [allPhones]: {
        fontSize: "3.2rem",
      },
    },
    h2: {
      fontSize: "3.5rem",
      fontWeight: "700",
      [allPhones]: {
        fontSize: "2.75rem",
      },
      "&.page-title": {
        marginBottom: "120px",
      },
    },
  },
  overrides: {
    // Style sheet name ⚛️
    MuiTypography: {
      // Name of the rule
      gutterBottom: {
        marginBottom: "20px",
      },
    },
    MuiTabs: {
      flexContainer: {
        borderBottom: "1px solid #ddd",
      },
      indicator: {
        height: "3px",
        borderRadius: "5px 5px 0 0",
      },
    },
    MuiButton: {
      sizeLarge: {
        paddingTop: "15px",
        paddingBottom: "15px",
      },
    },
  },
};

export default MuiTheme;

App.js

然后在您的应用中，您可以像这样添加自定义主题：

import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import AppTheme from "./AppTheme";

<ThemeProvider theme={createTheme(AppTheme)}>
    Route and stuff ...
</ThemeProvider>;

如何覆盖 mui class？

How to override mui class?

css

css-selectors

material-ui

jss