material-ui 用 useStyles / jss 覆盖主题
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>
}
输出:
如您所见,覆盖样式的唯一方法是创建另一个主题 :O 我想知道 styles
覆盖不起作用的原因是指定 className
道具等同于指定 root
CSS class for Input,但您的主题覆盖在 input
CSS class 应用于不同的元素(根元素是 div,输入元素是 div 中的 <input>
元素)。
在下面的示例中,您可以看到两种不同的定位 <input>
元素的方法。第一种方法使用 nested selector 来定位 .MuiInputBase-input
。第二种方法使用 classes
道具(而不是 className
)并提供覆盖作为 input
CSS class.
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);
如何在不使用 !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>
}
输出:
如您所见,覆盖样式的唯一方法是创建另一个主题 :O 我想知道 styles
覆盖不起作用的原因是指定 className
道具等同于指定 root
CSS class for Input,但您的主题覆盖在 input
CSS class 应用于不同的元素(根元素是 div,输入元素是 div 中的 <input>
元素)。
在下面的示例中,您可以看到两种不同的定位 <input>
元素的方法。第一种方法使用 nested selector 来定位 .MuiInputBase-input
。第二种方法使用 classes
道具(而不是 className
)并提供覆盖作为 input
CSS class.
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);