样式化 material UI 个组件

Question

不是真正的问题，但我不满意。我正在使用 react + typescript + css modules + https://material-ui-next.com/. Problem is that when I need to style material ui components I have to use !important a lot. Question is if there is a way to create styles without important. I create a sample project to reproduce the problem https://github.com/halkar/test-css-modules

Answer 1

您必须使用 API 组件。如果组件具有 API 的样式，则不能仅使用 css 为从库导入的组件设置样式。

*更新

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
  },
  label: {
    textTransform: 'capitalize',
  },
};

function Classes(props) {
  return (
    <Button
      classes={{
        root: props.classes.root, // class name, e.g. `classes-root-x`
        label: props.classes.label, // class name, e.g. `classes-label-x`
      }}
    >
      {props.children ? props.children : 'classes'}
    </Button>
  );
}

Classes.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Classes);

Answer 2

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，这意味着每次您将 appbar 组件添加到您应用 muiTheme 的树下的应用程序时，它都会给它一个高度50px。这是您可以为每个组件应用的所有样式的列表 https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js。

使用样式属性应用样式

要将样式应用到各个组件，通常可以使用样式属性并将所需样式传递给它。

这是文档中的另一个示例，其中 12 像素的边距应用于 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}}。

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

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

Answer 3

我应该使用 JssProvider 并告诉它在页面 head 部分中将 material UI 样式放在我的样式之前。

import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';

const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
jss.options.insertionPoint = document.getElementById('jss-insertion-point');

function App() {
  return (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}

export default App;

样式化 material UI 个组件

Styling material UI components

css

reactjs

typescript

material-ui

css-modules

全局应用样式

使用样式属性应用样式