javascript - 如何获得 CSS 转换以应用于 React 动态生成的样式？

Question

我有一个按钮组件，它使用上下文提供的主题:

按钮.js

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

按钮.styles.scss

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

由于背景颜色现在由 React 设置，过渡效果不再起作用。有没有办法让它工作，例如，在 JSS 中重写所有内容(假设所有应用程序的样式都是在 scss 中完成的)。

Answer 1

您是否确认 React 主题未设置过渡和悬停规则？如果是，那么覆盖这些的唯一方法是将样式设置为内联。也许在分配样式属性之前添加到主题对象(或其克隆)上，或者以某种方式将主题覆盖到更接近其来源的地方。