Javascript 样式化组件在重新渲染时不应用转换效果？

我正在使用

样式化组件

对我的组件进行动态样式化，但我似乎无法让它以我想要的方式工作

我正在尝试添加一个

易入易出

的按钮效果，这些按钮是程序化和动态聚焦的

如您所见，样式已应用，但是

转换

属性不起任何作用。有没有办法做到这一点

作为信息提示，组件（按钮）每3秒重新渲染一次以切换，这可能是原因吗？如果是，如何解决这个问题

组件

class LanguageButton extends PureComponent {
    render() {
        const { children, theme, isFocussed, ...otherProps } = this.props;

        const Button = styled.div`
            border: 1px solid ${theme};
            margin-top: 10px;
            margin-bottom: 10px;
            background-color: transparent;
            text-align: center;
            padding-top: 25px;
            padding-bottom: 25px;
            min-height: 0;
            transition: all 0.1s ease-in-out;

            :hover {
                background-color: ${theme};
                transition: all 0.1s ease-in-out;
            }
            :active {
                background-color: ${theme};
            }

            &.isFocussed {
                transition: all 0.1s ease-in-out;
                background-color: #ebebeb;

                :hover {
                    background-color: ${theme};
                    transition: all 0.1s ease-in-out;
                }
                :active {
                    background-color: ${theme};
                }
            }
        `;

        return (
            <Button
                className={classnames("BUTTON BUTTON--50 GM--noselect", { isFocussed })}
                {...otherProps}
            >
                {children}
            </Button>
        );
    }
}

class LanguageButton扩展了PureComponent{
render（）{
const{children，theme，isfocused，…otherProps}=this.props；
const按钮=styled.div`
边框：1px实心${theme}；
边缘顶部：10px；
边缘底部：10px；
背景色：透明；
文本对齐：居中；
填充顶部：25px；
垫底：25px；
最小高度：0；
过渡：所有0.1都易于输入输出；
：悬停{
背景色：${theme}；
过渡：所有0.1都易于输入输出；
}
：活动{
背景色：${theme}；
}
&.我很专注{
过渡：所有0.1都易于输入输出；
背景色：#ebebebeb；
：悬停{
背景色：${theme}；
过渡：所有0.1都易于输入输出；
}
：活动{
背景色：${theme}；
}
}
`;
返回(
{儿童}
);
}
}

基于此代码片段，我假设您正在添加/删除此“isFocused”类，这是问题的根源。对于转换，您希望避免添加/删除类本身，因为这样转换就无法正确渲染，因为它根本不存在

根据这段代码，我假设您正在添加/删除这个“isFocused”类，这是问题的根源。对于转换，您希望避免添加/删除类本身，因为这样转换就无法正确渲染，因为它根本不存在

谢谢你看一看，但我怎么才能做到这一点呢？除了添加/删除一个类之外，我真的没有其他线索。这取决于你想完成什么。您正在更改按钮悬停时的背景色、

isFocused

类悬停时的背景色等。发生的冲突太多，这意味着您的代码只是在应用弹出的

isFocused

类的样式。另一个注意事项是，您不需要到处添加

转换

类。只需将

转换

片段放在要产生效果的根元素上，就像按钮本身一样。只需尝试在没有

isFocused

的情况下执行相同的代码，并在hover上进行转换。是的，确实到处都是，因为我认为这可以解决问题。但是悬停运行得很好，我认为这仅仅是因为react正在重新渲染，因此没有发生转换：/有什么想法吗？（在实现了您所说的所有内容后仍然无法工作）感谢您的关注，但我如何才能做到这一点？除了添加/删除一个类之外，我真的没有其他线索。这取决于你想完成什么。您正在更改按钮悬停时的背景色、

isFocused

类悬停时的背景色等。发生的冲突太多，这意味着您的代码只是在应用弹出的

isFocused

类的样式。另一个注意事项是，您不需要到处添加

转换

类。只需将

转换

片段放在要产生效果的根元素上，就像按钮本身一样。只需尝试在没有

isFocused

的情况下执行相同的代码，并在hover上进行转换。是的，确实到处都是，因为我认为这可以解决问题。但是悬停运行得很好，我认为这仅仅是因为react正在重新渲染，因此没有发生转换：/有什么想法吗？（执行完你说的一切后仍然不起作用）