web-dev-qa-db-ja.com

Selectコンポーネントの境界線と矢印アイコンの色を変更しますMaterial UI

暗い背景でマテリアルUI Select コンポーネントを使用しようとしています。

enter image description here

しかし、ドロップダウンアイコンと下線の境界線の色を白に変更できません。私はクラスを使用してスタイルをオーバーライドすることを見てきました、そして私は以下で色を変えることができます：

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>   
        )
    }
}

ただし、Selectコンポーネントがフォーカスされている間は下線の色を設定できないようです。つまり、上記のコードでは、白い下線とアイコンが表示されますが、コンポーネントにフォーカスがある間、下線は黒のままです。

cssreactjsmaterial-ui
6
simen-andresen

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>   
        )
    }
}

適切なコントラストを得るための非常にきれいなソリューションではありませんが、それは仕事をします。

2
simen-andresen

下の境界線の色は次のコードで変更できます。これがお役に立てば幸いです。

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

CodeSandboxの例

1
Jan-Philipp
select: {
   '&:before': {
        borderColor: 'var(--galaxy-blue)',
    },
    '&:hover:not(.Mui-disabled):before': {
        borderColor: 'var(--galaxy-blue)',
    }
},

<Select
   className={classes.select}
   value={selected}
   onChange={this.handleChange}
>
0
Sarah Cheatham