Question

我正在使用Material UI在React中选择一个组件。该项目使用在脚本文件中导入的外部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'中设置组件的样式。对于MenuItem，我必须在每个值旁边使用通用类和！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文件吗？这样，它将覆盖而不必使用重要标签。

有没有一种方法可以在SCSS中不使用！important（反应+材质）

1 个答案: