css - 有没有办法修改 '&:before/:after' 以提供动态属性？

Question

具有 &:before 的样式化组件我想授予对动态颜色属性的访问权限的属性。但我不知道如何应用它。

我试过将 Prop 传递给 <Hover /> 并且有效。但是 &:before 中的三 Angular 形无法访问。

const Hover = styled.div`
  padding:7px;
  margin: -102px auto;
  border-style: solid;
  border-radius: 15px; 
  border-width: 3px;
  text-align: left;
  font-weight: 400;
  font-size: 19px;
  color: #000000;
  font-family: sans-serif;
  position: absolute;
  left:-15px;
  z-index:10;

   &:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid ;
  border-right: 10px solid transparent;
  border-top: 10px solid ;
  border-bottom: 10px solid transparent;
  left: 19px;
  bottom: -19px;
  z-index:10;

}
`;

作为单个样式组件，以下类是:

class MarkerHover extends Component {

    render() {
        const {color, children}= this.props
        return (


            <Hover style={{backgroundColor: color }}>
           {...children}
                </Hover>


        );
    }
}

export default MarkerHover;

在成功将颜色 Prop 传递给 &:before 后，我希望有一个完整的彩色窗口 split 。

Answer 1

正如 Styled Components 的文档所述(参见 https://www.styled-components.com/docs/basics#passed-props)，您可以读取传递的 props:

const Hover = styled.div`
  color: ${props => props.color};
`;

当你像这样传递它们时:

<Hover color="#f00" />

您也可以在伪元素中使用相同的属性:

const Hover = styled.div`
  color: ${props => props.color};
  &::before {
    background: ${props => props.color};
  }
`;

所以不要在您的样式化组件上使用 style 属性，而是传递常规 Prop 。

如果你只想在特定条件后应用 CSS 规则，你可以这样做:

const Hover = styled.div`
  color: #ccc;
  &::before {
    content: "";
    padding: 16px;
    ${props => props.withBg ? `background-color: ${props.withBg}` : ''}
  }
`;

有背景:

<Hover withBg="#f00" />

没有背景:

<Hover />