javascript - material-ui 用 useStyles / jss 覆盖主题
问题描述
如何在不使用 !important 的情况下使用样式覆盖 Material-UI 主题?
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
input: {
background: '#dd7711',
padding: 10,
},
},
},
},
})
export default makeStyles(theme => ({
hutber: {
background: '#000',
color: '#fff',
},
}))
function SpacingGrid() {
const classes = useStyles()
return <MuiThemeProvider theme={theme}><Input label="Outlined" variant="outlined" className={classes.hutber} /></MuiThemeProvider>
}
输出:
如您所见,覆盖样式的唯一方法是创建另一个主题:OI 想知道是否styles
解决方案
覆盖不起作用的原因是因为指定className
道具等同于root
为 Input 指定 CSS 类,但是您的主题覆盖在input
应用于不同元素的 CSS 类上(根元素是 div,输入元素是该 div 中的一个<input>
元素)。
在下面的示例中,您可以看到两种不同的定位<input>
元素的方法。第一种方法使用嵌套选择器来定位.MuiInputBase-input
. 第二种方法使用classes
prop (而不是className
)并提供覆盖作为input
CSS 类。
import React from "react";
import ReactDOM from "react-dom";
import {
createMuiTheme,
MuiThemeProvider,
makeStyles
} from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
input: {
background: "#dd7711",
padding: 10
}
}
}
});
const useStyles = makeStyles(theme => ({
hutber: {
"& .MuiInputBase-input": {
background: "#000",
color: "#fff"
}
},
alternateApproach: {
background: "#000",
color: "#fff"
}
}));
function App() {
const classes = useStyles();
return (
<MuiThemeProvider theme={theme}>
<Input defaultValue="Without overrides" variant="outlined" />
<br />
<br />
<Input
defaultValue="With overrides"
variant="outlined"
className={classes.hutber}
/>
<br />
<br />
<Input
defaultValue="Alternate approach"
variant="outlined"
classes={{ input: classes.alternateApproach }}
/>
</MuiThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
推荐阅读
- php - 类的对象无法转换为 int
- libgdx - 使用 LIBGDX 量化颜色梯度
- javascript - 如何在它们下方制作两列和输入框?像那样:
- autodesk-forge - 如何使用 Autodesk Forge 查看器离线查看模型?
- android - TextView 中的图像比例
- java - 将 JSONObjet 放入 JSONArray
- go - Golang `pions` lib 示例问题
- c# - ASP.NET MVC5 - 助手不与模型一起行动
- sql - SQL:City wise,product wise 最新订单 ID
- r - R中的正则表达式给我每个输入的TRUE