Question

当Material-ui表单控件获得焦点时，我正在尝试应用某些样式。

伪类“ hover”在下面的代码中效果很好，但“ focus”却不能。

我假设单击Input组件可以使其具有焦点，但似乎不起作用。知道为什么以及如何使它起作用吗？

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)

Answer 1

您可以通过覆盖输入的样式或覆盖类名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

Material ui中的Focus伪类

1 个答案: