Материал-ui v1 переопределение стиля фокуса ввода

Я пытаюсь переопределить стиль входного компонента, когда он находится в фокусе, через имя класса 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);

Спасибо

2 2
reactjs material-ui

2 ответа:

Лучший способ сделать это-переопределить стиль 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);

Вы можете прочитать больше о переопределении стилей компонента с помощью классов здесь .

2

Попробуйте использовать стилизованные компоненты следующим образом: 

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

Почему это круто? Для начала, он полностью поддерживается material-ui@next. Во-вторых, код намного чище. Наконец, вы можете легко использовать компонент styledInput в другом месте вашей кодовой базы.

Я приведу еще один пример в своем блоге: http://blog.jamesattard.com/2018/02/material-ui-10-with-styled-components.html

0