代码之家 › 专栏 › 技术社区 › simen-andresen

更改选定组件的边框和箭头图标材质用户界面的颜色

material-ui reactjs css

simen-andresen · 技术社区 · 6 年前

我想用一个材料界面 Select 深色背景上的组件:

但我无法将下拉图标和下划线边框的颜色更改为白色。我已经研究过使用类重写样式,并且能够使用以下内容更改颜色:

const styles = theme => {
    root: {
       borderBottom: '1px solid white',
    },
    icon: {
       fill: 'white',
    },
}

class MyComponent extends React.Component {

    render() {
        const {classes} = this.props;
        return (
            <Select
                value={this.props.value}
                inputProps={{
                    classes: {
                        root: classes.border,
                        icon: classes.icon,
                    },
                }}
            >
                <MenuItem
                    value={this.props.value}
                >
                    Foo
                </MenuItem>
            </Select>   
        )
    }
}

但是,当选定组件处于焦点时,我似乎无法设置下划线的颜色,即使用上面的代码,我得到白色下划线和图标,但是当焦点位于组件时,下划线保持黑色。

3 回复 | 直到 6 年前

simen-andresen 6 年前

在一些人的帮助下 Jan-Philipp 我把所有的东西都涂成了白色,同时部件保持在焦点上:

const styles = theme => ({
    select: {
        '&:before': {
            borderColor: color,
        },
        '&:after': {
            borderColor: color,
        }
    },
    icon: {
        fill: color,
    },
});


class MyComponent extends React.Component {

    render() {
        const {classes} = this.props;
        return (
            <Select
                value="1"
                className={{classes.select}}
                inputProps={{
                    classes: {
                        icon: classes.icon,
                    },
                }}
            >
                <MenuItem value="1"> Foo 1</MenuItem>
                <MenuItem value="2"> Foo 2</MenuItem>
            </Select>   
        )
    }
}

不是一个很好的解决办法来获得正确的对比度,但它做的工作。

Jan-Philipp 6 年前

您可以使用以下代码更改底部边框颜色。希望这对你有帮助。

const styles = theme => ({
  select: {
    "&:before": {
      borderColor: "red"
    }
  }
});

const MySelect = ({ classes }) => (
  <Select value="1" className={classes.select}>
    <MenuItem value="1">Option 1</MenuItem>
    <MenuItem value="2">Option 2</MenuItem>
    <MenuItem value="3">Option 3</MenuItem>
  </Select>
);

Example in CodeSandbox

sebap 5 年前

您可以访问输入(和下划线),如下所示:

<Select
  autoWidth
  classes={{
    root: styles.root,
    select: styles.select
  }}
  displayEmpty
  input={
    <Input
      classes={{
        underline: styles.underline
      }}
    />
  }
  onChange={this.onChange}
  value=""
>

推荐文章