Reactjs 已设置样式的组件：是否设置组件的样式而不将其包装在容器/包装器中？

是否可以在不创建容器的情况下设置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;

import React，{Component}来自'React'；
从“样式化组件”导入样式化；
常量PitchSliderContainer=styled.input`
文本对齐：右对齐；
浮动：对；
`;
常量PitchSlider=（）=>
导出默认的俯仰滑块；

---

是否有任何方法可以在不创建容器的情况下设置

PitchSlider的样式？
我认为您所做的是正确的方法。因为这就是样式化组件的全部要点。创建可重复使用的表示组件。在这里，您的
PitchSliderContainer
就是这样一个样式化的
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;
`;

当您使用
styled
时，您用一个。这意味着
styled
函数返回的只是一个常规的React组件，可以正常使用，并且接收道具而不需要额外的包装层。例如，可以这样使用：

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



查看sandbox以查看您定义的最初在页面中使用的组件。
另一种选择是使用attrs函数以完全避免额外的功能组件：@PhilPlückthun这是一个很好的建议，我将它添加到我的答案中：）
<ParentComponent>
  <PitchSliderContainer type='range' step='any' />
</ParentComponent>