Как выбрать материал-пользовательский интерфейс? - PullRequest
Новая
       13

Как выбрать материал-пользовательский интерфейс?

0 голосов
/ 22 октября 2018

Вот ожидаемый результат:

enter image description here

enter image description here

Вот как я это сделалдо сих пор:

enter image description here

Что я не могу сделать, так это поставить значок SVG справа;следующий текст, вот проверенный результат:

enter image description here

Более того, я получил точную черную линию, когда мой курсор перекрывает элемент.

enter image description here

А вот мой код: 

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

Не могли бы вы посоветовать, как правильно расположить иконку и как избавиться от нижней строки?Спасибо.

1 Ответ

0 голосов
/ 22 октября 2018

Собственная иконка компонента 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 .

...