我有一个颜色输入列表，这些颜色输入可更改显示的markdown预览中语法突出显示的特定部分的颜色。输入是从辅助对象colorSections生成的，该对象存储了输入的所有相应信息以及初始颜色值。对象中的属性名称与样式表:root中为css变量提供的名称相同。

我设法遍历了输入并设置了一个事件，以便颜色值更改并显示在markdown部分中，但是当任何输入更改时，整个markdown预览都将覆盖所选的颜色。

我的目标是能够单击每个输入并分别更改特定的css变量，从而使我能够创建自定义主题以突出显示语法。

我设法通过使用事件侦听器写出每个输入并调用setProperty来使其正常工作，但这不是一个好方法。我假设我在辅助对象的方法循环中缺少某些内容。

我读了几篇文章，帮助我取得了长足的进步，但我没有达到目标。

拾色器组件

function ColorPickerSection() {
  const [colorVal,setColorVal] = useState(colors)

  const handleInputChange = (e) => {
    const inputs = [].slice.call(document.querySelectorAll('input'));
    inputs.forEach(input => {
      input.addEventListener('change',getInputVal(e))
    })
  }

  const getInputVal = (e) => {
    for (let option of Object.keys(colors)) {
      const property = option
      document.documentElement.style.setProperty(`--${property}`,e.target.value);
    }
  }

  const onColorChange = (e,colorValKey) => {
    setColorVal({
      ...colors,[colorValKey]: e.target.value
    })
    handleInputChange(e)
  }

  return (
    <div>
      {Object.keys(colorSelect).map(groupName => {
        return (<div key={groupName}>
          <GroupName>{groupName}</GroupName>
          {Object.keys(colorSelect[groupName]).map(color => {
            return (
              <ColorPicker
                id='input'
                key={color}
                label={color}
                value={colorVal[color]}
                onChange={(e) => onColorChange(e,color)}
              />
            )
          })}
        </div>)
      })}
    </div>
  )
}

export default ColorPickerSection

帮助对象

const colorSelect = {
  'Line Highlights': {
    'highlight-background': '#F7EBC6','highlight-accent': '#F7D87C'
  },'Inline Code': {
    'inline-code-color': '#DB4C69','inline-code-background': '#F9F2F4'
  },'Code Blocks': {
    'block-background': '#F8F5EC','base-color': '#5C6E74','selected-color': '#b3d4fc'
  },'Tokens': {
    'comment-color': '#93A1A1','punctuation-color': '#999999','property-color': '#990055','selector-color': '#669900','operator-color': '#a67f59','operator-background': '#FFFFFF','variable-color': '#ee9900','function-color': '#DD4A68','keyword-color': '#0077aa'
  }
}

const colorNames = []
const colors = {}

Object.keys(colorSelect).map(key => {
  const group = colorSelect[key]
  Object.keys(group).map(color => {
    colorNames.push(color)
    colors[color] = group[color]
  })
})

export { colorSelect,colorNames,colors }