材质UI中的自定义样式对象

Question

大多数Material UI组件都有如下样式属性： 谁能给我一个如何使用它的例子？

我是否必须检查生成的DOM以查看实际生成的html元素然后设置样式？

Answer 1

material-ui公开了许多组件的样式。有两种方法可以做到这一点。

全局应用样式

您可以全局设置组件样式并将其应用于主题。这方面的一个例子是这样的（从文档http://www.material-ui.com/#/customization/themes复制）：

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({
  palette: {
    textColor: cyan500,
  },
  appBar: {
    height: 50,
  },
});

class Main extends React.Component {
  render() {
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy
    // using React's context feature.
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <AppBar title="My AppBar" />
      </MuiThemeProvider>
    );
  }
}

export default Main;

正如您在此处所看到的，appBar组件的高度为50px，这意味着每次您在应用muiTheme的树下向应用程序添加appbar组件时，它将为其提供50px的高度。这是您可以为每个组件https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js应用的所有样式的列表。

使用样式属性

应用样式

要将样式应用于单个组件，通常可以使用样式属性并将其传递给所需的样式。

这是文档中的另一个例子，其中12px的边距应用于RaisedButton。

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  margin: 12,
};

const RaisedButtonExampleSimple = () => (
  <div>
    <RaisedButton label="Default" style={style} />
    <RaisedButton label="Primary" primary={true} style={style} />
    <RaisedButton label="Secondary" secondary={true} style={style} />
    <RaisedButton label="Disabled" disabled={true} style={style} />
    <br />
    <br />
    <RaisedButton label="Full width" fullWidth={true} />
  </div>
);

export default RaisedButtonExampleSimple;

现在，样式在同一个文件中定义，但您可以在单独的文件中定义它们，并将它们导入到使用组件的文件中。

如果要应用多个样式，则可以使用扩展运算符，如下所示：style={{...style1,...style2}}。

通常，您使用style属性为组件（根元素）中的特定事物设置样式，但某些组件具有多个属性以设置组件的不同元素的样式。在此页面http://www.material-ui.com/#/components/raised-button中的属性下，您可以看到有样式属性，labelStyle和rippleStyle来设置RaisedButton的不同部分的样式。

检查您正在使用的组件下的属性，并查看可以使用的样式属性，否则请检查可覆盖的可用全局样式属性。希望这有帮助！