[英]Overriding TextField color in MaterialUI
I'm trying to get the border color to change from that default purple to white.我试图让边框颜色从默认的紫色变为白色。
Here's what I have so far:这是我到目前为止所拥有的:
const useStyles = makeStyles(theme => ({
darkModeColorInput: {
color: WHITE
},
darkModeColorLabel: {
color: WHITE,
"&:after": {
borderColor: WHITE
}
}
}));
<TextField
margin="normal"
inputProps={{
className: classes.darkModeColorInput
}}
InputLabelProps={{
className: classes.darkModeColorLabel
}}
required
fullWidth
id="email"
label="handle or email"
name="email"
autoComplete="email"
autoFocus
color={WHITE}
/>
This renders:这呈现:
The label also switches from white to that default purple on focus. label 也从白色切换到默认的紫色焦点。 What am I doing wrong here?
我在这里做错了什么?
The easiest way to do this is to use the dark theme through the ThemeProvider
:最简单的方法是通过
ThemeProvider
使用深色主题:
import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';
const darkTheme = createMuiTheme({
palette: {
type: 'dark',
},
});
<ThemeProvider theme={darkTheme}>
<Component />
</ThemeProvider>
Then, you will get a theme for all Material UI components that will show correctly on a dark background.然后,您将获得所有 Material UI 组件的主题,该主题将在深色背景上正确显示。
If you still want to fully control the look (and don't want to use a theme), you need to set custom styles for InputLabelProps
and InputProps
on your TextInput
( https://material-ui.com/api/text-field/ ).如果您仍想完全控制外观(并且不想使用主题),则需要在
TextInput
上为InputLabelProps
和InputProps
设置自定义 styles ( https://material-ui.com/api/text-field / )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.