javascript - 在没有 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} />
}
解决方案
您可以覆盖主题中组件或元素的样式。为此,您需要在主题文件夹中创建一个名为 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;
推荐阅读
- python - 使用数据框填充另一个数据框
- python - Python - 如何重用具有有限数量字段的数据类?
- vim - 在 Vim Visual 模式下转换为小写,直到特定分隔符
- javascript - 如何使用 asp.net core mvc 在引导模式中加载 AngularJS 代码
- mysql - SQL 错误 1452 和自动增量问题
- python - 如何使用 SpaCy Matcher(或 PhraseMatcher)类来提取 2 个项目的序列?
- conda - 将要求添加到“运行”或“主机”失败 conda-build
- docker - docker 容器同时关闭,重新启动失败,错误为将 max 写入 pids.max,我该如何找到问题?
- node.js - 在 nodejs 中,如何在事务中使用 async/await 而不是通过“then”来解析承诺?
- django - 在单个谷歌云应用引擎实例上部署 DjangoREST+React 项目。可能吗?