React项目中使用styled components开发Radio按钮时选中态样式未生效的求助

代码中存在的具体问题 #

• 语法兼容性问题：styled-components原生不支持Sass预处理器的语法规则，代码中直接书写的lighten()函数、$bg变量都是Sass专属写法，会被浏览器识别为无效CSS，直接导致选中态样式完全不生效。
• 样式属性缺值：编写的border-left: solid #a1a1a1没有指定边框宽度，浏览器默认会将这类缺省宽度的边框渲染为0像素，实际页面上看不到分割线效果。
• 选择器匹配要求：使用相邻兄弟选择器input + label时，必须保证input和对应的label是紧邻的平级DOM节点，中间不能插入其他包裹标签，否则选择器无法命中目标元素，点击label时也不会触发选中态的样式切换。

修正后的完整可运行代码 #

import styled from 'styled-components';
// 如果需要动态计算提亮色，可以安装polished库后导入：
// import { lighten } from 'polished';

const RadioGroup = styled.div`
    border: solid 3px #332f35;
    display: inline-block;
    margin: 20px;
    border-radius: 10px;
    overflow: hidden;

    input[type=radio] {
      // 隐藏原生单选框，相比直接display:none更兼顾无障碍访问能力
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    label {
      color: #99949f; // 对应原lighten(#332f35, 40%)的计算结果
      display: inline-block;
      cursor: pointer;
      font-weight: bold;
      padding: 5px 20px;
    }

    input[type=radio]:checked + label {
      color: #fff7ec; // 替换原无效的lighten($bg,60%)写法，使用实际可解析的色值
      background: #ff9000;
    }

    input[type=radio] + label {
      // 补全缺失的1px边框宽度
      border-left: 1px solid #a1a1a1;
    }
`;

// 实际页面中的DOM结构参考
/*
<RadioGroup>
  <input type="radio" name="radio-demo" id="opt-a" />
  <label for="opt-a">选项A</label>
  <input type="radio" name="radio-demo" id="opt-b" />
  <label for="opt-b">选项B</label>
</RadioGroup>
*/

补充说明 #

如果习惯用Sass式的颜色计算逻辑，可以安装polished工具库，通过导入的lighten方法实现颜色动态调整，不要直接在styled-components的模板字符串里写原生Sass的变量、函数语法，这类语法必须经过预处理器编译才能被浏览器识别。

内容的提问来源于stack exchange，提问作者Victor Silveira