防止反跳输入影响React中的扩展面板

Question

我遇到了一个问题，我需要在ReactJS的扩展面板中进行去抖动的输入，但是我遇到了这样的问题：单击输入后，整个扩展栏会从黑色更改颜色，因此我默认了该应用程序变成灰白色。我不知道是什么原因引起的或如何预防。

<ExpansionPanel>
      <ExpansionPanelSummary
        expandIcon={<ExpandMoreIcon />}
        aria-label="Expand"
        aria-controls="additional-actions1-content"
        id="additional-actions1-header"
      >
        <FormControlLabel
          aria-label="Acknowledge"
          onClick={event => event.stopPropagation()}
          onFocus={event => event.stopPropagation()}
          control={
            <Checkbox
              checked={rule.enabled}
              onChange={() => Edit({ enabled: !rule.enabled })}
            />
          }
        />
        <DebounceInput
          id="standard-basic"
          value={rule.name}
          onChange={event => {
            Edit({ name: event.target.value });
          }}
          element={TextField}
          debounceTimeout={500}
        />
      </ExpansionPanelSummary>
</ExpansionPanel>

我尝试使用color="black"进行简单的样式设置，但这没有用

感谢您的帮助