[英]Using custom styles from theme in material ui without makeStyles
我想知道是否有办法在 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} />
}
您可以覆盖主题中组件或元素的样式。 为此,您需要在主题文件夹中创建一个名为 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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.