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

实现这一目标的最佳方法是覆盖{"a":[1,"1",1],"b":["1",2],"c":[true,3,"test"]}组件公开的focused样式，但使用类而不是类名。

为此，您应首先专门为焦点输入创建一个CSS样式类：

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", }, });上的focused样式，如下所示：

Input

当你加入所有这些时，一个完整的工作示例将如下所示：

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

您可以阅读有关使用类here覆盖组件样式的更多信息。

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

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

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

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

2 个答案: