Назначить CSS-свойство styled-component на основе реквизита, переданного компоненту

Question

У меня есть два компонента TextField и Метка .

TextField передает пропелу требование к ярлыку.Я хочу изменить стилевой компонент на основе пропущенного пропуска req . Вот мой текущий код, который не работает.

На консоль не сообщается об ошибках.

TextField.js

import React, {Component} from 'react';
import styled from 'styled-components';
import Label from '../Label/Label';

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin: 16px 8px 8px 8px;
`;

const Input = styled.input`
  border-bottom: 1px solid rgba(0, 0, 0, .23);

  &:focus {
    border-bottom: 1px solid #2196f3;
  }
`;

class TextField extends Component {
  render() {
    const {
      label,
      req = true,
    } = this.props;

    return (
      <Wrapper>
        <Label req={req} text={label}/>
        <Input type={'textfield'}/>
      </Wrapper>
    );
  }
}

export default TextField;

Label.js

import React, {Component} from 'react';
import styled from 'styled-components';

const LabelBase = styled.label`
  color: rgba(0, 0, 0, .54);
  font-size: 1rem;
  line-height: 1;

  &:after {
    content: ${props => props.req ? '*' : ''};
  }
`;

class Label extends Component {
  render() {
    const {
      req,
      text,
    } = this.props;

    return (
      <LabelBase req={req}>{text}</LabelBase>
    );
  }
}

export default Label;

Answer 1

Вы говорите, что хотите стилизовать компонент на основе ref реквизита, но похоже, что вы используете этот реквизит в качестве логического значения для добавления текста, а не стилей, поэтому я просто выбрал упрощенное решение для этого, так как psuedo-селекторы типа :after не поддерживаются в стилях React JS.Есть и другие способы обойти это в случае необходимости, но я думаю, что вы можете просто сделать следующее.Тем не менее, я включил способ передачи стилей дочернему компоненту для справки:

class Label extends React.Component {

  render() {
    const {
      req,
      text,
      moreStyles
    } = this.props;

    const styles = {
      "color": "rgba(0, 0, 0, .54)",
      "fontSize": "1rem",
      "lineHeight": 1
    }

    return (
      <div style={{...styles, ...moreStyles}}>{text + (req ? '*' : '')}</div>
    );
  }
}

ReactDOM.render(<Label text="test" req="Yes" moreStyles={{"backgroundColor": "blue", "border": "1px solid black"}}/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>