Material-ui v1输入焦点样式覆盖 [英] Material-ui v1 Input focus style override

问题描述

我正在尝试通过类名overide覆盖Input组件的样式.

I'm trying to override the styling of the Input component when it is on focus via class name overide.

我尝试了以下操作:

const style = theme => ({
  input: {
    width: '20%',
    borderRadius: 4,
    backgroundColor: 'white',
    border: '1px solid #ced4da',
    fontSize: 20,
    '&:focus': {
      width: '40%',
      borderColor: '#80bdff',
      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
    },
  }
});

class test extends Component {

// UI
render() {
    const {classes} = this.props
    return (
        <AppBar position="static">
            <Toolbar>
                <Input className={classes.input} />
            </Toolbar>
        </AppBar>
    );
}
}

export default withStyles(style)(test);

谢谢

推荐答案

最好的方法是覆盖 Input 组件公开的 focused 样式，但是使用类而不是类名.

The best way to accomplish that is to override the focused style exposed by the Input component, but using classes instead of class names.

为此，您首先应该创建一个CSS样式类，专门用于重点输入:

To do so, you should first create a CSS style class specifically for the focused 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",
  },
});

然后在 Input 上覆盖 focused 样式，如下所示:

Then override the focused style on the Input like this:

<Input
  className={classes.input}
  classes={{ focused: classes.inputFocused}}
/>

当您将它们全部结合在一起时，一个完整的工作示例将如下所示:

When you join that all together, a full working example would look like this:

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);

您可以在此处.

这篇关于Material-ui v1输入焦点样式覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！