Фокус псевдокласс в Material UI - PullRequest
Новая
       8

Фокус псевдокласс в Material UI

0 голосов
/ 01 ноября 2018

Я пытаюсь применить некоторые стили, когда элемент управления Material-UI получает фокус.

Псевдокласс «hover» хорошо работает в приведенном ниже коде, но «focus» - нет.

Я предполагаю, что нажатие на компонент ввода дает ему фокус, но это, похоже, не работает. Есть идеи, почему и как заставить это работать? 

import withStyles from "@material-ui/core/styles/withStyles"
import Input from "@material-ui/core/Input"
import InputLabel from "@material-ui/core/InputLabel"
import FormControl from "@material-ui/core/FormControl"


const styles = theme => ({
    root: {
        border: "1px solid",
        borderRadius: theme.shape.borderRadius,
        borderColor: "rgba(0, 0, 0, 0.23)",
        marginBottom: theme.spacing.unit * 2,
        padding: theme.spacing.unit,
        width: "100%",
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        "&:focus": {
            backgroundColor: "blue"
        }
    }
})


class TagsComponent extends React.Component {
    render() {
        return (
            <FormControl variant="outlined">
                <InputLabel>Tags</InputLabel>
                <Input
                    disableUnderline
                    classes={{
                        root: this.props.classes.root
                    }}
                />
            </FormControl>
        )
    }
}

export default withStyles(styles)(TagsComponent)

1 Ответ

0 голосов
/ 12 июля 2019

Вы можете применять стили путем переопределения стилей для ввода или переопределения имени класса focused

const styles = {
 ...,
 focused: {
   backgroundColor: "green"
 },
 input: {
    "&:focus": {
      backgroundColor: "blue",
      color: "white"
    }
  }
}

 <Input
    disableUnderline
    classes={{
        root: classes.root,
        focused: classes.focused,
        input: classes.input
    }}
 />

Пример песочницы https://codesandbox.io/embed/gallant-pascal-rh8jc

...