我有一个按钮组件,它使用上下文提供的主题:
按钮.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
中完成的)。
最佳答案
您是否确认 React 主题未设置过渡和悬停规则?如果是,那么覆盖这些的唯一方法是将样式设置为内联。也许在分配样式属性之前添加到主题对象(或其克隆)上,或者以某种方式将主题覆盖到更接近其来源的地方。
关于javascript - 如何获得 CSS 转换以应用于 React 动态生成的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59158581/