在沒有 makeStyles 的 Material ui 中使用來自主題的自定義樣式

Question

我想知道是否有辦法在 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} />
}

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;