如何在React中使用样式组件（不是material-ui类！）来设置material-ui选择组件的样式？

Question

我正在努力使用样式组件而不是材质类来设计我的材质 UI 选择组件。我使用的是material-ui/core 4.12.3。

如果我使用例如材料中的旧 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>

但为了项目的完整性和限制，我更喜欢使用样式组件进行样式设置。

到目前为止，我只能改变字母颜色。即使我尝试使用开发工具中出现的类名称来设计它，也没有什么真正有效的。

不起作用（遗憾的是）

  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',
    },

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

Answer 1

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

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

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

相反，您可以继续使用材质文档中提供的css属性，但不要尝试通过将 Material UI 根组件定义为样式组件来替换它。如果您将 Material Select 组件包装在您自己的另一个由 styled-components 制作的 div 中，那么您可以将这些属性传递给子 Material 元素，就像您现在所做的那样。

有些属性需要一个“!important”标志来覆盖 Material 中的样式，有些则需要您使用 somethingProps （例如“menuProps”、“inputProps”等）属性以便覆盖样式。这是因为，当您使用 somethingProps 属性，Material 会自动将这些样式级联到树中的正确元素。