有没有办法不在 SCSS 中使用 !important 这么多（反应 + 材料）

Question

我正在使用 Material UI 在 React 中开发一个 Select 组件。该项目使用在组件的脚本文件中导入的外部 SCSS 表。

我找不到另一种方法来重新设置组件的 CSS 样式，而是使用通用材质 UI 类。但是，最后似乎我不得不一直使用 !important 来覆盖属性。

.js 看起来像这样：

<Select
    value={this.state.age}
    onChange={this.handleChange}
    name="age"
    displayEmpty
    className='select-row-items'
    IconComponent = {ExpandMore}
    MenuProps={{
        anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
        },
        transformOrigin: {
            vertical: "top",
            horizontal: "left"
        },
        getContentAnchorEl: null
    }}>
    <MenuItem disableGutters={true} value="">123-456-789123456-01</MenuItem>
    <MenuItem disableGutters={true} value={10}>123-000-457889562-00</MenuItem>
    <MenuItem disableGutters={true} value={20}>122-586-888865987-00</MenuItem>
</Select>

我只能在我自己分配的 className 'select-row-items' 中直接设置组件样式。对于 MenuItems，我必须在每个值旁边使用通用类和 !important，这样它才能工作。

关于如何改进 CSS 有什么想法吗？

我的 CSS 如下所示：

.select-row-items {

  .MuiSelect-select {
    background-color: #D5E4EE; //replace with variables for secondary colors (light blue)
    color: #194581; //replace with variables for secondary colors (dark blue)
    font-size: 12px;
    font-weight: normal;
    padding: 4px 12px;

    &.MuiSelect-select {
      padding-right: 36px;
    }

    &:focus {
      background-color: #D5E4EE; //replace with variables for secondary colors (light blue)
    }

    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 25px;
      background-color: rgba(0, 0, 0, 0.1);;
    }
  }

  .MuiSelect-icon {
    font-size: 16px;
    color: #194581; //replace with variables for secondary colors (dark blue)
    font-weight: lighter;
    right: 4.5px;
    top: 50%;
    transform: translateY(-50%);
  }

  &.MuiInput-underline:before,
  &.MuiInput-underline:hover:not(.Mui-disabled):before,
  &.MuiInput-underline:after {
    display: none;
  }
}

.MuiList-root {
  padding: 0 !important;
  background-color: #D5E4EE; //replace with variables for secondary colors (light grey)

}
.MuiPopover-paper {
  left: 0!important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.MuiMenuItem-root {
  font-size: 12px !important;
  color: #194581 !important; //replace with variables for secondary colors (dark blue)
  font-weight: normal;
  padding: 5px 12px !important;
  border-bottom: 1px solid #fff !important;

  &:first-child {
    border-top: 1px solid #fff !important;
  }
}

.MuiListItem-button:hover, .MuiListItem-root.Mui-selected:hover {
  background-color: #194581 !important; //replace with variables for secondary colors (dark blue)
  color: #ffffff !important;
}

.MuiListItem-root.Mui-selected {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

Answer 1

你能在脚本导入后渲染你的 SCSS/CSS 文件吗？这样它就会覆盖而不必使用重要的标签。