React表单：如何使用styled-components为@rocketseat/unform的Choice元素设置样式？

原因说明 #

@rocketseat/unform 提供的 Input、Select 组件最终会渲染为原生的 input、select 标签，因此你定义的全局标签选择器可以正常命中样式。而 Choice、Check 属于组合型组件，会渲染「外层容器 + 多选/单选输入框 + 对应label文本」的嵌套DOM结构，无法直接通过组件名作为选择器匹配样式。

解决方案 #

方案1：针对渲染后的DOM结构编写样式 #

直接在现有的styled-components样式规则中，新增针对Choice组件生成的DOM结构的样式，同时通过flex实现复选框和文本的对齐效果，完整样式代码如下：

import styled from 'styled-components';

export const Container = styled.div`
  form {
    display: flex;
    flex-direction: column;
    margin-top: 30px;

    select {
      background: rgb(0, 0, 0, 0.1);
      border: 0;
      border-radius: 4px;
      height: 34px;
      padding: 0 15px;
      color: #000;
      margin: 0 0 10px;

      &::placeholder {
        color: rgba(0, 0, 0, 0.4);
      }
    }

    input {
      background: rgb(0, 0, 0, 0.1);
      border: 0;
      border-radius: 4px;
      height: 34px;
      padding: 0 15px;
      color: #000;
      margin: 0 0 10px;

      &::placeholder {
        color: rgba(0, 0, 0, 0.4);
      }
    }

    /* 新增：Choice组件外层容器样式 */
    .input-box:has(.choice-group) {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    /* 新增：单个选项容器样式，flex实现对齐 */
    .choice-group label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      margin: 2px 0;
      color: #000;
    }

    /* 新增：重置复选框默认样式，避免和全局input样式冲突 */
    .choice-group input[type="checkbox"] {
      width: 16px;
      height: 16px;
      margin: 0;
      flex-shrink: 0;
    }
  }
`;

需要同步修改表单部分的Choice组件外层容器，添加自定义类名避免样式污染：

<div className="input-box">
  <span>Curso:</span>
  <div className="choice-group">
    <Choice name="curso1" options={optionsCursos} multiple />
  </div>
</div>

方案2：自定义Choice渲染逻辑（更灵活） #

如果需要完全自定义选项的结构和样式，可以使用Choice组件自带的render属性自定义渲染每个选项，完全自主控制DOM结构：

<Choice 
  name="curso1" 
  options={optionsCursos} 
  multiple 
  render={({ option, checked, onChange }) => (
    <label className="custom-choice-item" key={option.value}>
      <input 
        type="checkbox" 
        checked={checked} 
        onChange={onChange} 
        value={option.value} 
      />
      <span>{option.label}</span>
    </label>
  )}
/>

之后直接在样式中定义.custom-choice-item的规则即可。

表单当前效果参考 #

内容的提问来源于stack exchange，提问作者Ruben Martins