[英]Does material-ui useStyles really requires the entire props object?
[英]material-ui overwrite theme with 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
屬性相當於為 Input指定root
CSS 類,但是您的主題覆蓋位於應用於不同元素的input
CSS 類上(根元素是 div, input 元素是該 div 中的<input>
元素)。
在我下面的示例中,您可以看到兩種不同的定位<input>
元素的方法。 第一種方法使用嵌套選擇器來定位.MuiInputBase-input
。 第二種方法使用classes
屬性(而不是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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.