代码之家 › 专栏 › 技术社区 › four-eyes

如何使用主题中的颜色

material-ui reactjs javascript

four-eyes · 技术社区 · 6 年前

theme

export default createMuiTheme({
  palette: {
    primary: {
      main: 'red',
      contrastText: '#ffffff'
    },
    secondary: {
      main: 'green',
      contrastText: '#ffffff'
    },
    error: {
      main: 'blue',
      contrastText: '#ffffff'
    }
  },
})

React.Component ?

我正在努力

import { withTheme } from '@material-ui/core';

然后

class Foo extends React.Component {

  render() {
    return (
               <Avatar 
                   style={{backgroundColor: this.props.theme.primary}} />
            )
    }

const withThemeUserMenu = withTheme(Foo);
export default Foo;

1 回复 | 直到 6 年前

Peadar 6 年前

我想这正是你们进口的方式。如果要使用导出未指定的导出 default 不管它叫什么,你也不需要牙套。

他们建议在他们的文档中这样做:

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

1 年前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

1 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

1 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

1 年前

Terje Nygård · 反应18和材料UI(@mui)。样式不会附加到主题中

2 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

2 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

2 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

2 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

2 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

2 年前