styled-components：样式组件没有将它们包装在容器/包装器中？

Question

是否可以在不必创建容器的情况下设置反应组件的样式？

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

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

我认为你所做的是正确的方式。因为这是Styled Components的重点。创建可重用的表示组件。在这里，你的PitchSliderContainer就是这样一种风格的input组件。您可以编写一个更通用的组件来接受某些道具，并根据道具呈现<input>。这样的风格组件也应该有一个名字。

您要求的可以用另一种方式完成。这不建议用于结构组件，但由于您的组件只有一个<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作为道具并将其传递给您的组件。

编辑：正如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;
`;

Answer 2

当你使用styled时，你用HOC包装你的初始容器。这意味着styled函数返回的只是一个可以正常使用的常规React组件，并且接收没有额外包装层的道具。它可以用于这种方式：

<ParentComponent>
  <PitchSliderContainer type='range' step='any' />
</ParentComponent>

请参阅this沙箱以查看最初在页面中使用的组件。