如何在类组件中用渲染属性为react-popper设置样式？遇TS报错

错误原因 #

你写的代码错误地尝试从Popper传递给children的style对象中解构color属性，但Popper提供的style仅包含定位相关的CSS属性（如position、top、left等），并不包含color，因此TypeScript抛出“Property 'red' does not exist on type 'CSSProperties'”的错误。

正确写法 #

方式1：合并Popper定位样式与自定义样式 #

这是推荐写法，既保留Popper的定位功能，又添加自定义样式：

<Popper strategy="fixed">
  {({ style }) => (
    <div style={{ ...style, color: 'red' }}>opened</div>
  )}
</Popper>

方式2：仅使用自定义样式（不推荐） #

若不需要Popper的定位能力，可忽略其提供的style：

<Popper strategy="fixed">
  {() => (
    <div style={{ color: 'red' }}>opened</div>
  )}
</Popper>

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