首页 > 解决方案 > 在没有 makeStyles 的材料 ui 中使用来自主题的自定义样式

问题描述

我想知道是否有一种方法可以访问 MyComponent 中的 theme.customElements.acitonButton 而不必使用 makeStyles?例如,我可以以某种方式输入 className={theme.customElements.actionButton} 吗?

主题.js

const theme = createMuiTheme({
   customElements: {
     actionButton: {
       backgroundColor: '#007AFF'
     }
   }
})


export default theme

我的组件.tsx

import { makeStyles, createStyles, Theme } from '@material-ui/core'

// wondering if i can remove makeStyles and somehow access styles set in theme.js and add to <IconButton />?
const useStyles: any = makeStyles((theme: Theme) => {
  return createStyles({
    actionButton: theme.customElements.actionButton
  })
})


const MyComponent: React.FunctionComponent<MyComponentProps> = props => {
   const classes = useStyles()
   <IconButton className={classes.actionButton} />
}

标签: javascriptmaterial-uithemesformik-material-ui

解决方案


您可以覆盖主题中组件或元素的样式。为此,您需要在主题文件夹中创建一个名为 overrides 的文件夹,并创建一个与要覆盖其主题的组件同名的文件。

像这样的文件夹结构

然后您可以像这样更改组件样式。

组件的覆盖样式

export default {
elevation1: {
    boxShadow: '0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)'
}

};

您还需要将主题提供程序添加到 App.js。

import React from 'react';
import ThemeProvider from '@material-ui/styles/ThemeProvider';
import CssBaseline from '@material-ui/core/CssBaseline';
import {darkBlueTheme} from './theme';
import Routes from './Routes';

function App() {
    return (
        <StateProvider reducer={appReducer} initialState={getInitialState()}>
            <ThemeProvider theme={darkBlueTheme}>
               App CODE HERE
            </ThemeProvider>
        </StateProvider>
    );
}

export default App;

推荐阅读