我想用Material-Ui v.5.4.0
创建我自己的主题。我遇到了问题。我无法更改TextField
focused
边框color
和width
。我花了几个小时的研究,并没有找到工作的解决方案。我开始想,在主题中这样做是可能的吗?但这不合逻辑。
当前主题代码:
import { createTheme } from '@mui/material/styles'
// Colors
const blue = '#5A5BD4'
const blueDark = '#4f4fd8'
// Parameters
const buttonsBorderRadius = 20
const buttonPadding = '5px 15px'
const inputBorderRadius = 10
const theme = createTheme({
components: {
// Buttons
MuiButton: {
variants: [
// Blue button
{
props: { variant: 'blueButton' },
style: {
backgroundColor: blue,
color: '#ffffff',
borderRadius: buttonsBorderRadius,
textTransform: 'none',
padding: buttonPadding,
'&:hover': {
backgroundColor: blueDark
}
}
},
// Transparent button
{
props: { variant: 'transparentButton' },
style: {
color: blue,
borderRadius: buttonsBorderRadius,
textTransform: 'none',
padding: buttonPadding
}
}
]
},
// Inputs
MuiOutlinedInput: {
styleOverrides: {
root: {
borderRadius: inputBorderRadius,
'& fieldset': {
border: `1px solid ${blue}`
}
},
focus: {
border: `1px solid ${blueDark}`
}
}
}
}
})
export default theme
我的输入代码:
<TextField
size='small'
variant='outlined'
label={t('paslelbimo_data_nuo')}
type='date'
InputLabelProps={{
shrink: true
}}
fullWidth
value={publicationDateFrom}
onChange={(e) => setPublicationDateFrom(e.target.value)}
/>
1条答案
按热度按时间wn9m85ua1#
由于我无法准确地告诉你在对焦和不对焦时想要的效果是什么,我决定创建一个通用的示例,带有过于戏剧化的样式,可能对你的需要进行修改是有用的:
本质上,我只是在focused和unfocused状态下覆盖
.MuiOutlinedInput-notchedOutline
:工作示例CodeSandbox:https://codesandbox.io/s/customstyles-material-demo-forked-uri26?file=/theme.js:84-531