CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
FatGuyLaughing
FatGuyLaughing

Reputation: 215

Override imported styled-component CSS properties

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;

Upvotes: 0

Views: 1139

Answers (1)

Richard
Richard

Reputation: 1046

Your Label component needs a className prop

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

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

Upvotes: 1

Related Questions