在没有 makeStyles 的材料 ui 中使用来自主题的自定义样式

Question

我想知道是否有一种方法可以访问 MyComponent 中的 theme.customElements.acitonButton 而无需使用 makeStyles？例如，我可以输入 className={theme.customElements.actionButton} 吗？

theme.js

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


export default theme

MyComponent.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} />
}

Answer 1

您可以在主题中覆盖组件或元素的样式。 为此，您需要在主题文件夹中创建一个名为 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;