如何在React JS中重写CSS类？

Question

例如，在某些事件触发器上，我现在在样式表中有一个名为'track-your-order'的css类，我必须更新'track-your-order'中的任何内容并将该更新的类应用于同一div。我不是要切换它，而是要用用户将其赋予该div的新值更新或更改或替换相同的CSS类。

Answer 1

您可以使用状态更新和三元运算符。

className={isEventTriggered? "updated-track-your-order": "track-your-order"}

Answer 2

我认为您可以使用npm styled-components模块中的StyledWrapper。因此，如果您想使“按订单排序”成为动态，则只需创建包含CSS的新值的状态即可。

然后将其放入渲染器中：

const StyledWrapper = styled.div`
  ${this.state.newStyles}
`;

[不要忘记用<StyledWrapper></StyledWrapper>包装受影响的元素，或者只是将所有元素包装在render中。有关更多文档：https://github.com/styled-components/styled-components