首页 文章

在Material UI中引用主题的主要颜色而不是特定颜色

提问于
浏览 次
5

使用ReactJS和Material UI，我有一个项目，我在其中更改了主题颜色 .

const newTheme = getMuiTheme({
    fontFamily: 'Roboto, sans-serif',
    palette: {
        primary1Color: cyan500,
        primary2Color: cyan700,
        primary3Color: grey400,
        accent1Color: amberA400,
        accent2Color: grey100,
        accent3Color: grey500,
        textColor: darkBlack,
        alternateTextColor: white,
        canvasColor: white,
        borderColor: grey300,
        disabledColor: fade(darkBlack, 0.3),
        pickerHeaderColor: cyan500,
        clockCircleColor: fade(darkBlack, 0.07),
        shadowColor: fullBlack,
    },
});

  // App class
  render() {
    return(
        <MuiThemeProvider muiTheme={newTheme}>
            <Project />
        </MuiThemeProvider>
    )
  }

一切都按预期工作 . 某些组件（如按钮）可以根据主要道具设置颜色 . 但是，我有一个使用需要主色的图标的组件 . 我可以导入颜色并直接设置它：

import React from 'react';
import ActionLock from 'material-ui/svg-icons/action/lock';
import {cyan500} from 'material-ui/styles/colors';

export default class LockIcon extends React.Component {
    render() {
        return(
            <ActionLock color={cyan500} />
        )
    }
}

有没有办法引用主题的主要颜色，而不是单独设置每个组件的颜色？就像是：

import React from 'react';
import ActionLock from 'material-ui/svg-icons/action/lock';
import {primary1Color} from 'somewhere';

export default class LockIcon extends React.Component {
    render() {
        return(
            <ActionLock color={primary1Color} />
        )
    }
}
reactjs material-ui

2 回答

  • 7

    是的，你有！使用muiThemeable ..

    import muiThemeable from 'material-ui/styles/muiThemeable';
class LockIcon extends React.Component {
    render() {
        return(
            <ActionLock color={this.props.muiTheme.palette.primary1Color} />
        )
    }
}
        export default muiThemeable()(LockIcon)

    from material-ui docs

    回复于
  • 7

    添加如何访问material-ui v1.0.0中的主题颜色（当前为beta）使用 withTheme 组件 .
    另请检查以下Example .

    import React, {Component} from 'react';
import { withTheme } from 'material-ui/styles';

class WithThemeExample extends Component {
    render() {
        const { theme } = props;
        const {primary, secondary} = theme.palette.text;

        return (
            <div>
                <div style={{color: primary}}>Hi in Primary color</div>
                <div style={{color: secondary}}>Bye in Secondary color</div>
            </div>
        );
    }
}

export default withTheme()(WithThemeExample);
    回复于

相关问题