アウトライン化されたバリアントのアウトラインの色を変更する方法がわかりませんTextField
GitHub の問題を調べたところ、人々はTextField
「InputProps」プロパティの使用を勧めているようですが、これは何もしないようです。
これが現在の私のコードです
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';
const styles = theme => ({
field: {
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
height: '30px !important'
},
});
class _Field extends React.Component {
render() {
const { classes, fieldProps } = this.props;
return (
<TextField
{...fieldProps}
label={this.props.label || "<Un-labeled>"}
InputLabelProps={{ shrink: true }} // stop from animating.
inputProps={{ className: classes.fieldInput }}
className={classes.field}
margin="dense"
variant="outlined"
/>
);
}
}
_Field.propTypes = {
label: PropTypes.string,
fieldProps: PropTypes.object,
classes: PropTypes.object.isRequired
}
export default withStyles(styles)(_Field);
ベストアンサー1
https://codesandbox.io/s/6rx8p
<CssTextField
label="Username"
className="username"
name="username"
onChange={this.onChange}
type="text"
autoComplete="current-password"
margin="normal"
inputProps={{ style: { fontFamily: 'nunito', color: 'white' } }}
/>
//declare the const and add the material UI style
const CssTextField = withStyles({
root: {
'& label': {
color: 'red',
},
'& label.Mui-focused': {
color: 'white',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'yellow',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'white',
},
'&:hover fieldset': {
borderColor: 'white',
},
'&.Mui-focused fieldset': {
borderColor: 'yellow',
},
},
},
})(TextField);