Question

我有一个 复选框 和标签。在CheckBox组件内部使用Label组件时，我想为标签添加额外的边距。通过styled()可以做到吗？

控制台输出

看起来您已经将styled（）包裹在React组件（标签）上，但是className属性没有传递给孩子。除非在您的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>
    );
  }
}

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

1 个答案: