Question

我正在尝试在深色背景上使用Material UI 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>   
        )
    }
}

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

Answer 1

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

获得正确对比度的解决方案不是很好，但确实可以。

Answer 2

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

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

Answer 3

您可以像这样访问输入（和下划线）：

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

Answer 4

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

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

Answer 5

这对我有用：

import {
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  OutlinedInput as MuiOutlinedInput,
} from "@material-ui/core";
    
const OutlinedInput = withStyles((theme) => ({
  notchedOutline: {
    borderColor: "white !important",
  },
}))(MuiOutlinedInput);

const useStyles = makeStyles((theme) => ({
  select: {
    color: "white",
  },
  icon: { color: "white" },
  label: { color: "white" },
}));

function Component() {
  return (
    <FormControl variant="outlined">
      <InputLabel id="labelId" className={classes.label}>
        Label
      </InputLabel>
      <Select
        labelId="labelId"
        classes={{
          select: classes.select,
          icon: classes.icon,
        }}
        input={<OutlinedInput label="Label" />}
      >
        <MenuItem>A</MenuItem>
        <MenuItem>B</MenuItem>
      </Select>
    </FormControl>
  );
}

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

5 个答案: