引用主题的主色，而不是MUI中的特定颜色 [英] Reference to theme's primary color instead of a specific color in MUI

问题描述

使用ReactJS和MUI，我有一个项目，其中我更改了主题颜色。

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(
        <ThemeProvider theme={newTheme}>
            <Project />
        </ThemeProvider>
    )
  }

一切都按预期运行。某些组件(如按钮)可以根据主要道具设置颜色。但是，我有一个组件使用了需要原色的图标。我可以导入颜色并直接设置：

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} />
        )
    }
}

推荐答案

是的！ 使用多主题..

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

这篇关于引用主题的主色，而不是MUI中的特定颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！