javascript - 防止去抖动输入影响 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"throghout 进行简单的造型，但没有奏效

任何帮助表示赞赏

标签： javascripthtmlcssreactjs