Есть ли способ изменить '&: before /: after', чтобы получить динамическое свойство?

Question

Стилизованный компонент, имеющий атрибут &:before, который я хочу предоставить доступ к свойству динамического цвета.Но я теряюсь в том, как применить это.

Я пытался передать реквизиты в <Hover />, и это работает.Но Треугольник в &:before не может получить к нему доступ.

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;

Я ожидаю получитьцелое цветное окно после успешной передачи цветового реквизита в &:before подразделение.

Answer 1

Как указано в документации по стилевым компонентам (см. https://www.styled -components.com / docs / basics # прошло-реквизиты ), вы можете прочитать пропущенные реквизиты:

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 на вашемстилизованный компонент, но проходите обычные процедуры.

Если вы хотите применить правило CSS только после определенного условия, вы можете сделать это следующим образом:

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

С фоном:

<Hover withBg="#f00" />

Без фона:

<Hover />