Override imported styled-component CSS properties

Question

I have a CheckBox and Label components. When using the Label component inside the CheckBox component I would like to add additional margining to the label. Is this possible via styled() ?

Console Output

It looks like you've wrapped styled() around your React component (Label), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

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

Your Label component needs a className prop

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

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