React中向Styled Range Input传递多Props设置背景报错求助

问题1：无法同时传递theme与自定义props #

• 错误原因：样式函数里错误拆分了参数，styled-components会把theme和自定义props（如value）合并到同一个对象中传入，不能拆成两个独立参数。
• 修正步骤：
  1. 从单个props对象中同时解构theme和value
  2. 把value转为数值类型，避免字符串拼接导致的计算错误

问题2：动态创建Styled组件的警告 #

• 错误原因：在函数组件内部声明styled组件，会导致每次组件渲染时都重新创建这个styled组件实例，触发性能警告。
• 修正步骤：将SliderInput的定义移到Slider函数组件外部，确保组件只被初始化一次。

修改后的完整代码 #

import React, { useState } from "react";
import styled from "styled-components";

// 移到函数外部，避免动态创建警告
const SliderInput = styled.input.attrs({ type: "range" })`
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-top: 3%;
    outline: 0;
    height: 80px;
    border-radius: 15px;
    // 从单个props对象解构theme和value，同时处理数值转换
    background: ${({ theme, value }) =>
      `linear-gradient(to right, ${theme.colors.primary} 0%, ${theme.colors.highlight} ${Number(value)/255*100}%, #fff ${Number(value)/255*100}%, #fff 100%);`};
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);

    ::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 24px;
      height: 24px;
      background-image: radial-gradient(
        circle,
        ${({ theme }) => theme.colors.primary} 40%,
        ${({ theme }) => theme.colors.secondary} 45%
      );
      border-radius: 50%;
      box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
    }

    ::-moz-range-thumb {
      width: 24px;
      height: 24px;
      -moz-appearance: none;
      border-radius: 50%;
      box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
    }
  `;

const Slider = (props) => {
  const [value, setValue] = useState(255);
  
  function handleChange(e) {
    setValue(e.target.value);
    SetBrightness(e.target.value);
  }

  return (
    <SliderInput
      className={props.name}
      min={0}
      max={255}
      value={value}
      onChange={handleChange}
      step={63.75}
    />
  );
};

export default Slider;

function SetBrightness(value) {
  if (window.fully !== undefined) {
    window.fully.setScreenBrightness(parseFloat(value));
  }
}

内容的提问来源于stack exchange，提问作者Andri Anwar