Переопределить импортированные CSS-свойства styleled-компонента

Question

У меня есть компоненты CheckBox и Label. При использовании компонента Label внутри компонента CheckBox я хотел бы добавить дополнительное поле для метки. Это возможно через styled()?

Консольный выход

Похоже, что вы обернули styled() вокруг компонента React (Label), но реквизит className не передается дочернему элементу. Стили не будут отображаться, если className не составлено в вашем компоненте React.

CheckBox.js

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

const Wrapper = styled.div`
`;

const Input = styled.input`
`;

const CheckBoxLabel = styled(Label)`
  margin-left: 1em;
`;

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

    return (
      <Wrapper>
        <Input type={'checkbox'}/>
        <CheckBoxLabel text={label}/>
      </Wrapper>
    );
  }
}

export default CheckBox;

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;
`;

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

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

export default Label;

Answer 1

Ваш Label компонент нуждается в className подпирать

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

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