时间戳

首页 > 解决方案 > 如何使用样式化的组件为 Material UI 中的 Select 设置样式？

reactjs - 如何使用样式化的组件为 Material UI 中的 Select 设置样式？

问题描述

我正在努力

export const StyledAppSelect = styled(Select)`
  &:before {
    border-color: white;
  }

  &:after {
    border-color: white;
  }
  color: white;
`

但这似乎并没有改变字体颜色或边框颜色。任何帮助将不胜感激。

谢谢你。

标签： reactjsmaterial-uistyled-components

解决方案

为了知道如何设置它的样式 - 您首先需要检查为该组件实际生成的 HTML。因为有些样式可以应用到顶层<div>，有些样式可能需要应用到嵌套元素。

这是一个例子：

import Select from '@material-ui/core/Select';

// width or color can be set on top level
// but to get styled border you need to style nested div
const StyledSelect = styled(Select)`
  width: 100px;
  color: red;
  & > div {
    border: 2px solid green;
  }
`;
....
....
// somewhere in where you need to render it
<StyledSelect>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</StyledSelect>

这是它的样子（但我没有更改图标:hover等。这就是为什么你在图片上看到的有点奇怪）：

在此处输入图像描述

要设置图标样式，您可以添加以下内容：

& > svg {
    color: red;
}

或者您可以更改输入的底部边框：

// yeah, sometimes it's not that easy to override frameworks styles :)
// so, to figure out what to override you need to check what framework generates for you
// e.g. this ":hover:not(.Mui-disabled):before" is how Material adds
// bottom border when you hover input (the dark line on the img I attached above), so that's the way how we can override it
&:hover:not(.Mui-disabled):before {
    border-bottom: 2px solid yellow;
}

希望你明白:)

推荐阅读