Question

我对css很陌生，我在这里有点困惑。我使用材料ui with react和redux。我想以某种方式编辑特定组件的一些属性。例如，假设我们将TextField与disabled属性一起使用。我可以看到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点缀。我想把它改成隐藏的。如何在不影响框架代码的情况下执行此类操作？

Answer 1

您可以覆盖某些材质-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;

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

TextField

之后，您应该将const muiTheme = getMuiTheme({ textField: { backgroundColor: 'yellow', }, datePicker: { color: 'yellow', }, });传递给同名属性 muiTheme组件。该组件应该包装应用程序的根组件。

MuiThemeProvider

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

1 个答案: