如何在反应中使用样式组件（不是 material-ui 类！）设置 material-ui select 组件的样式？

Question

我正在为我的 material-ui select 组件设置样式而苦苦挣扎，而不是 material- 类。我正在使用 material-ui/core 4.12.3.

如果我使用 material 中的旧 makeStyles 组件并创建我自己的类它工作得很好，例如内联样式或通过 menuProps。

有效

  const useStyles = makeStyles((theme) => ({
    icon: {
      top: 0,
      marginRight: '1px',
    },
    selectRoot: {
      '&:focus': {
        backgroundColor: 'white',
        borderRadius: '10px',
      },
    },
  }))

有效

          <StyledSelect>
          classes={
            {
              //icon: classes.icon,
              //root: classes.selectRoot,
            }
          }

      MenuProps={{
        anchorOrigin: {
          vertical: 'bottom',
          horizontal: 'left',
        },

        getContentAnchorEl: null,
        style: {
          maxHeight: 400,
        },
      }}
                  style={{
                    border: '1px solid grey',
                    backgroundColor: 'white',
                    borderRadius: '10px',
                    width: '140px',
                    height: '40px',
                  }}
</StyledSelect>

但为了项目的完整性和限制，我更喜欢使用 style-components 来设计样式。

到目前为止，我只设法改变了字母的颜色。即使我尝试使用类出现在开发工具中的名称来设置它的样式，其他任何东西都不起作用。

不起作用（可悲）

  StyledSelect: styled(Select)`
  border: '1px solid grey';
  backgroundColor: white;
  borderRadius: '10px';
  width: '140px';
  height: '40px'

  '&:focus': {
    backgroundColor: 'white';
    background-color: 'white';
    borderRadius: '10px',
  };
  .MuiSelect-select:focus {
    backgroundColor: 'white';
    background-color: 'white';
    borderRadius: '10px',
  },
    &.MuiSelect-select:focus {
      backgroundColor: 'white',
      background-color: 'white',
      borderRadius: '10px',
    },
    & .MuiInputBase-formControl {
      border-color: red;
    }
    icon: {
      top: 0,
      marginRight: '1px',
    },

Material 文档在这种情况下并没有多大帮助。有什么想法吗？

Answer 1

它没有做太多，因为 Material UI 组件不是简单的 HTML 元素。例如，如果您在开发工具中查看 HTML 树，“Select” 不会呈现为 <select>...</select> 而是呈现为...

<div>
  <label />
  <div>
    <div />
    <input />
    <svg>
      <path />
    </svg>
    <fieldset>
      <legend>
        <span />
      </legend>
    </fieldset>
  </div>
</div>

样式嵌套在上述组件树的不同级别，因此要修改特定的边框或背景样式，您必须使用特定的选择器确切地知道要定位哪个元素（因为 id每次渲染都会更改属性）。

相反，您可以继续使用 css properties provided in the material documentation，但不要试图通过将 Material UI 根组件定义为样式组件来替换它。如果您将 Material Select 组件包装在您自己的另一个 div 中，使用 styled-components 制作，那么您可以将这些属性传递给子 Material 元素跟你现在做的差不多。

有些属性需要一个“!important”标志来覆盖 Material 中的样式，有些属性需要您使用 somethingProps（例如“menuProps”、“inputProps”等.) 属性以覆盖样式。这是因为虽然使用文档中的 class 名称和“！重要”标志手动覆盖它，但当您使用 somethingProps 属性，Material 会自动将这些样式级联到树中的正确元素。

如何在反应中使用样式组件（不是 material-ui 类！）设置 material-ui select 组件的样式？

How to style material-ui select component with style-components (not material-ui classes!) in react?

css

select

reactjs

material-ui