实现这一点的最佳方法是覆盖focused
暴露的风格Input
组件,但使用类而不是类名。
为此,您应该首先专门为焦点输入创建一个 CSS 样式类:
const styles = theme => ({
input: {
width: '20%',
borderRadius: 4,
backgroundColor: 'white',
border: '1px solid #ced4da',
fontSize: 20,
},
// Separate this part into it's own CSS class
inputFocused: {
width: '40%',
borderColor: '#80bdff',
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
backgroundColor: "#00FF00",
},
});
然后覆盖focused
风格上的Input
像这样:
<Input
className={classes.input}
classes={{ focused: classes.inputFocused}}
/>
当你把它们结合在一起时,一个完整的工作示例将如下所示:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Input from 'material-ui/Input';
const styles = theme => ({
input: {
width: '20%',
borderRadius: 4,
backgroundColor: 'white',
border: '1px solid #ced4da',
fontSize: 20,
},
// Separate this part into it's own CSS class
inputFocused: {
width: '40%',
borderColor: '#80bdff',
boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
backgroundColor: "#00FF00",
},
});
function Inputs(props) {
const { classes } = props;
return (
<div className={classes.container}>
<Input
className={classes.input}
classes={{ focused: classes.inputFocused}}
/>
</div>
);
}
Inputs.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Inputs);
您可以阅读有关使用类覆盖组件样式的更多信息here https://material-ui-next.com/customization/overrides/#overriding-with-classes.