如何获得CSS过渡以应用于React动态生成的样式？

Question

我有一个按钮组件，它利用了上下文提供的主题：

Button.js

() => {
  const theme = useContext(themeContext); // { primaryColor: "blue" }
  return <button className="MyButton" styles={{ backgroundColor: theme.primaryColor }}>Hello</button>
}

Button.styles.scss

.MyButton {
  background-color: purple
  transition: background-color 0.1s
  &:hover {
    background-color: green
  }
}

由于React现在正在设置背景色，因此过渡效果不再起作用。有没有一种方法可以使它工作而无需例如在JSS中重写所有内容（假设应用程序的所有样式都在scss中完成）。

Answer 1

您是否确认React主题没有设置过渡和悬停规则？如果是这样，则覆盖这些样式的唯一方法是设置内联样式。也许在分配样式attr之前将其添加到主题对象（或其主题的副本）上，或者以某种方式将主题覆盖在其源头附近。