覆盖导入的样式组件CSS属性

Question

我有一个CheckBox和Label组件。在CheckBox组件中使用Label组件时，我想为标签添加额外的页边距。这可能通过styled()？

控制台输出

看起来你已经在你的React组件（Label）周围包裹了styled（），但是className prop没有被传递给一个子。除非在您的React组件中组成className，否则不会呈现任何样式。

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>
    );
  }
}