Проблема с границей текстового поля заключается в том, что цвет, который вы хотите установить, имеет более низкий специфичность, чем исходный стиль, установленный Material-UI (MUI).
Например. MUI устанавливает этот класс при фокусировке:
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: (some color);
}
который более конкретен, чем пользовательский селектор, например:
.Component-cssNotchedOutline {
border-color: #f0f;
}
Solution A (not recommended)
Вы можете добавить !important исключение к цвету, но это 'плохая практика ':
import React from 'react';
import { createStyles, TextField, WithStyles, withStyles } from '@material-ui/core';
interface IProps extends WithStyles<typeof styles> {}
const styles = createStyles({
notchedOutline: { borderColor: '#f0f !important' },
});
export const TryMuiA = withStyles(styles)((props: IProps) => {
const { classes } = props;
return ( <TextField variant={ 'outlined' } label={ 'my label' }
InputProps={ {
classes: {
notchedOutline: classes.notchedOutline,
},
} }
/> );
});
Solution B (recommended)
В официальном примере MUI используются другие способы повышения специфичности.
Уловка в том, чтобы не стилизовать элемент напрямую, например:
.someChildElement { border-color: #f0f }
но добавить несколько дополнительных селекторов (больше, чем в MUI *), например:
.myRootElement.someExtra { border-color: #f0f }
.myRootElement .someChildElement { border-color: #f0f }
...
* (На самом деле достаточно использовать те же селекторы, что и MUI, потому что если специфика селекторов такая же, то используются более поздние)
Включить родительский элемент: вы могли заметить, что параметр notchedOutline действительно устанавливает цвет для несфокусированного элемента, но не для сфокусированного. Это потому, что стиль MUI включает элемент parent поля ввода (.MuiOutlinedInput-root.Mui-focused). Так что вам нужно также включить родителя.
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
const styles = {
root: { // - The TextField-root
border: 'solid 3px #0ff', // - For demonstration: set the TextField-root border
padding: '3px', // - Make the border more distinguishable
// (Note: space or no space after & matters. See SASS "parent selector".)
'& .MuiOutlinedInput-root': { // - The Input-root, inside the TextField-root
'& fieldset': { // - The <fieldset> inside the Input-root
borderColor: 'pink', // - Set the Input border
},
'&:hover fieldset': {
borderColor: 'yellow', // - Set the Input border when parent has :hover
},
'&.Mui-focused fieldset': { // - Set the Input border when parent is focused
borderColor: 'green',
},
},
},
};
export const TryMui = withStyles(styles)(function(props) {
const { classes } = props;
return (<TextField label="my label" variant="outlined"
classes={ classes }
/>);
})
Обратите внимание, что вы можете повысить специфичность разными способами, например это тоже сработает (немного по-другому):
'& fieldset.MuiOutlinedInput-notchedOutline': {
borderColor: 'green',
},
Примечание. Может показаться немного "грязным" добавлять селекторы только для повышения конкретности, когда они вам на самом деле "не нужны". Я думаю, что это так, но этот обходной путь иногда был единственным решением с момента изобретения CSS, поэтому он считается приемлемым.
person
kca
schedule
19.11.2020
Вот мой код в его текущем состоянии
