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

问题描述

我在React的Material UI中无法覆盖主题中的样式.我想自定义 columnsContainer 的 border ，但是它不起作用.只有 root 可以正常工作.

MuiDataGrid.js

 导出默认值{根: {backgroundColor:"white"，边框:"1像素绿色"，&&.columnsContainer":{borderBottom:`1px solid'blue'！important`}}}; 

解决方案

以下是正确的语法.与您的代码沙箱相比，所做的更改是:

1. 用 .MuiDataGrid-columnsContainer
替换 .columnsContainer
2. 将borderBottom语法更正为 1px纯蓝色，而不是 1px纯'blue'！important .

 导出默认值{根: {backgroundColor:"white"，边框:"1像素绿色"，&&.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屋！