在 React 中覆盖 Material UI 中的样式

Question

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

Check Here for Codesanbox

MuiDataGrid.js

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

Answer 1

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

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

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