如何将css框架的默认属性更改为材质ui答案

【问题标题】：How to change the default properties of a css framework as material ui如何将css框架的默认属性更改为材质ui
【发布时间】：2021-09-21 15:45:07
【问题描述】：

我对 css 很陌生，在这里我有点困惑。我正在使用带有 react 和 redux 的材料 ui。我想以某种方式编辑特定组件的某些属性。例如，假设我们使用具有 disabled 属性的 TextField。正如我所看到的，禁用的属性包含这些属性（我从文本字段中的材料 ui 节点模块中看到了）。

var styles = {
    root: {
      borderTop: 'none',
      borderLeft: 'none',
      borderRight: 'none',
      borderBottomStyle: 'solid',
      borderBottomWidth: 1,
      borderColor: borderColor,
      bottom: 8,
      boxSizing: 'content-box',
      margin: 0,
      position: 'absolute',
      width: '100%'
    },
    disabled: {
      borderBottomStyle: 'dotted',
      borderBottomWidth: 2,
      borderColor: disabledTextColor
    },

但我不希望在禁用borderBottomLine 时被点缀。我想将其更改为隐藏。如何在不影响框架代码的情况下进行这样的操作？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

您可以覆盖一些默认样式的 material-ui 组件。查看文档的this 部分。注意这个例子：

import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';

// This replaces the textColor value on the palette
// and then update the keys for each component that depends on it.
// More on Colors: http://www.material-ui.com/#/customization/colors
const muiTheme = getMuiTheme({
  textField: {
    backgroundColor: 'yellow',
  },
  datePicker: {
    color: 'yellow',
  },
});

// MuiThemeProvider takes the theme as a property and passed it down the hierarchy.
const Main = () => (
  <MuiThemeProvider muiTheme={muiTheme}>
    <AppBar title="My AppBar" />
  </MuiThemeProvider>
);

export default Main;

在这里，我们为TextField 组件覆盖background-color，为DatePicker 覆盖color。您应该导入 getMuiTheme 函数，将您想要覆盖的属性传递给它的对象。不幸的是，对于禁用的TextField，您只能覆盖文本颜色。您可以检查所有可以从默认主题源覆盖的属性 - https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js

const muiTheme = getMuiTheme({
  textField: {
    backgroundColor: 'yellow',
  },
  datePicker: {
    color: 'yellow',
  },
});

之后，您应该将muiTheme 传递给同名属性 MuiThemeProvider 组件。这个组件应该包装你的应用程序的根组件。

const Main = () => (
  <MuiThemeProvider muiTheme={muiTheme}>
    <AppBar title="My AppBar" />
  </MuiThemeProvider>
);

【讨论】：

【解决方案2】：

这里是示例代码。在您喜欢的 jsx 标签中使用 style 并像 CSS 一样正常编辑它，但属性和值必须在引号 ("") 内。

import React from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";

const index = () => {
  return (
    <AppBar style={{ backgroundColor: "black", height: "65px" }}>
      <Toolbar></Toolbar>
    </AppBar>
  );
};

export default index;

【讨论】：