Material-ui v1输入焦点样式覆盖

Question

我正试图通过类名覆盖时覆盖输入组件的样式。

我尝试过以下方法：

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

谢谢

Answer 1

实现这一目标的最佳方法是覆盖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覆盖组件样式的更多信息。

Answer 2

尝试使用Styled Components，如下所示：

...
import styled from "styled-components";

styledInput = styled(Input)`
    width: '20%',
    border-radius: 4,
    background-color: 'white',
    border: '1px solid #ced4da',
    font-size: 20,
`

class test extends Component {

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

export default test;

为什么这很酷？对于初学者来说，材料-ui @ next完全支持它。其次，代码更清晰。最后，您可以轻松地在代码库中的其他位置重用styledInput组件。

我在我的博客上给出了另一个例子：http://blog.jamesattard.com/2018/02/material-ui-10-with-styled-components.html