css - 如何将css框架的默认属性更改为material ui

Question

我对 css 很陌生，在这里我有点困惑。我将 Material UI 与 React 和 Redux 一起使用。我想以某种方式编辑特定组件的某些属性。例如，假设我们使用具有 disabled 属性的 TextField。如我所见，禁用属性包含这些属性(我从文本字段中的 Material 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 时加点。我想将其更改为隐藏。如何在不影响框架代码的情况下执行这样的操作？

Answer 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>
);