reactjs - styled-components:样式化组件而不将它们包装在容器/包装器中？

Question

是否可以在无需创建容器的情况下设置 React 组件的样式？

这是我当前问题的一个例子。我总是需要将组件包装在容器/包装器中。像这样...

import React, { Component } from 'react';
import styled from 'styled-components';

const PitchSliderContainer = styled.input`
    text-align: right;
    float: right;
`;

const PitchSlider = () => <PitchSliderContainer
    type="range"
    min="0.9"
    max="1.1"
    step="any"
    onChange={this.props.onChange}
/>

export default PitchSlider;

有什么方法可以设置 PitchSlider 的样式吗？无需创建容器？

Answer 1

我认为你所做的是正确的方法。因为这就是样式化组件的全部意义所在。创建可重用 演示 成分。在这里，您的 PitchSliderContainer就是这样一种风格 input成分。您可以编写一个更通用的组件来接受某些 Prop ，并呈现 <input>根据 Prop 。这样的样式组件也绝对应该有一个名称。

你所要求的可以用另一种方式来完成。这不推荐用于结构组件，但因为您的组件只有一个 <input>标签，这应该没问题:

const PitchSlider = ({ className }) => <PitchSliderContainer
    type="range"
    min="0.9"
    max="1.1"
    step="any"
    onChange={this.props.onChange}
    className={className}
/>

export default styled(PitchSlider)`
  text-align: right;
  float: right;
`;

确保您收到 className作为 Prop 并将其传递给您的组件。

编辑 :正如 Phil Pluckthun 所建议的，你也可以这样做:

const PitchSlider = styled.input.attrs({
  type: 'range',
  min: '0.9'
  max: '1.1'
  step: 'any'
  onChange: this.props.onChange
})`
  text-align: right;
  float: right;
`;