css - 如何自定义material-ui select？

Question

这是预期的结果:

这是我到目前为止的做法:

我不能做的是把SVG图标放在右边；接下来是正文，这是检查结果:

此外，当我的光标与元素重叠时，我得到了一条精确的黑线。

这是我的代码:

<MuiThemeProvider theme={createMuiTheme({
    overrides: {
        MuiSelect: {
            'root': {                         display: 'flex', 
                    alignItems: 'center'
            }
        },
        MuiInput: {
            '&:hover': { 
                    borderBottom: '0px', 
                    borderColor: 'transparent'
            },
            underline: {
                '&:after': { 
                    borderBottom: '0px', 
                    borderColor: 'transparent'
                },
                '&:hover': { 
                    borderBottom: '0px', 
                    borderColor: 'transparent'
                }
            }
        }
    }
})}>
<Select 
    IconComponent={newIcon}
    color={'#f1f1f1'}
    autoWidth={false}
    inputStyle={{
        borderBottom: '0px',
        color: '#2d2d2d', 
        fontFamily: 'Lato',
        fontWeight: 'bold',
        fontSize: '16px', 
        lineHeight: '19px',
    }}
    style={{
        borderBottom: 'none',
        backgroundColor: '#f1f1f1', 
        padding: '12px',
        width: '93px'
    }}
    value={0}
>
    <MenuItem value={0} style={{
        color: '#2d2d2d', 
        fontFamily: 'Lato',
        fontWeight: 'bold',
        fontSize: '16px', 
        lineHeight: '19px',
    }}>+852</MenuItem>
    <MenuItem value={1} style={{
        color: '#2d2d2d', 
        fontFamily: 'Lato',
        fontWeight: 'bold',
        fontSize: '16px', 
        lineHeight: '19px'
    }}>+86</MenuItem>
</Select>
</MuiThemeProvider>

这是我的图标:

   const newIcon = (props) => {
        return (
        <SvgIcon>
            <svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">
                <path fill="none" fill-rule="evenodd" stroke="#979797" stroke-width="2" d="M17 20l5.467 5.467L27.934 20"/>
            </svg>
        </SvgIcon>
        )
    };

请问如何正确放置图标，以及如何去掉底线？谢谢。

Answer 1

Select 的原生图标组件在 <svg> 上使用以下样式元素:

{ position: 'absolute', right: 0, top: 0, pointerEvents : 'none'}

您只需将上述样式属性应用到 MuiSelect.root覆盖以获得预期的结果。

您在鼠标悬停时观察到的突出显示来自 Input组件，它是 Select 的根元素成分。可以使用属性 disableUnderline 禁用此行为.

工作示例:

const iconStyle = { position: 'absolute', right: 0, top: 0, pointerEvents : 'none'};

const newIcon = (props) => {
      return (
        <svg xmlns="http://www.w3.org/2000/svg" style={iconStyle} width="32" height="32" viewBox="0 0 45 45">
          <path fill="none" fill-rule="evenodd" stroke="#979797" stroke-width="2" d="M17 20l5.467 5.467L27.934 20"/>
        </svg>
      )
  };

ReactDOM.render(
  <Select 
      IconComponent={newIcon}
      disableUnderline
      color={'#f1f1f1'}
      autoWidth={false}
      inputStyle={{
      borderBottom: '0px',
      color: '#2d2d2d', 
      fontFamily: 'Lato',
      fontWeight: 'bold',
      fontSize: '16px', 
      lineHeight: '19px',
      }}
      style={{
      borderBottom: 'none',
      backgroundColor: '#f1f1f1', 
      padding: '12px',
      width: '93px'
      }}
      value={0}
  >
      <MenuItem value={0} style={{
      color: '#2d2d2d', 
      fontFamily: 'Lato',
      fontWeight: 'bold',
      fontSize: '16px', 
      lineHeight: '19px',
      }}>+852</MenuItem>
      <MenuItem value={1} style={{
      color: '#2d2d2d', 
      fontFamily: 'Lato',
      fontWeight: 'bold',
      fontSize: '16px', 
      lineHeight: '19px'
      }}>+86</MenuItem>
  </Select>
  , document.getElementById('root'));

请参阅 StackBlitz 上的演示.