One of my components includes a CheckBox and Label element. I want to adjust the spacing around the label when it's used inside the CheckBox. Can this be achieved with styled()?
Debugging Info
The issue seems to be that the className prop is not being passed down to the child component (Label) even though styled() has been applied to it. In order for styles to render correctly, the className needs to be composed within the React component itself.
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;