在 React 中覆盖 Material UI 中的样式 [英] Overriding Styles in Material UI in React

问题描述

我在 React 的 Material UI 中覆盖主题中的样式时遇到问题.我想自定义 columnsContainer 的 border 但它不起作用.只有 root 运行良好.

MuiDataGrid.js

出口默认{根: {背景颜色:白色"，边框:`1px纯绿色`，& &.columnsContainer":{borderBottom:`1px 实心'蓝色'！重要`}}};

解决方案

以下是正确的语法.与您的代码沙箱相比的变化是:

1. 将 .columnsContainer 替换为 .MuiDataGrid-columnsContainer
2. 将 borderBottom 语法更正为 1px solid blue 而不是 1px solid 'blue' !important.

出口默认{根: {背景颜色:白色"，边框:`1px纯绿色`，& &.MuiDataGrid-columnsContainer":{borderBottom:`1px 纯蓝色`}}};

I have a problem overriding the styles in my theme in Material UI in React. I wanted to customize the border of columnsContainer but it isn't working. only the root is working well.

Check Here for Codesanbox

MuiDataGrid.js

export default {
  root: {
    backgroundColor: "white",
    border: `1px solid green`,
    "& .columnsContainer": {
      borderBottom: `1px solid 'blue' !important`
    }
  }
};

解决方案

Below is the correct syntax. The changes compared to your code sandbox are:

1. Replace .columnsContainer with .MuiDataGrid-columnsContainer
2. Correct the borderBottom syntax to be 1px solid blue instead of 1px solid 'blue' !important.

export default {
  root: {
    backgroundColor: "white",
    border: `1px solid green`,
    "& .MuiDataGrid-columnsContainer": {
      borderBottom: `1px solid blue`
    }
  }
};

这篇关于在 React 中覆盖 Material UI 中的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！