css - React/Typescript，样式化组件，注入类定义的问题

Question

我有一个 React 应用程序，其中 Styled Components 有一些样式。我的目标是动态添加一个 CSS 类定义（例如 .color-red{color:red}）到这个样式。我不想动态更改 CSS 属性，而是将整个 CSS 附加到现有的 CSS 上。

我的样式化组件是

const LayoutWithGlobalStyle = styled.div<GlobalStyledType>`
  ${props => (
      `.test{background-color:red}
      color: lightgray;
      ${props.add}
      `
  )}
`

它是这样使用的

<LayoutWithGlobalStyle add={globalStyle} id="layout-content-container" >

GlobalStyledType 是

type GlobalStyledType = {
    add: any;
};

一开始一切正常，并且类 eiEXnh 被分配给 LayoutWithGlobalStyle 但是当变量 globalStyle 发生变化时（它通过 Redux 传递）一个新的类名被分配给 LayoutWithGlobalStyle，新值不会添加到新类中，所有之前的 CSS ( .test{background-color:red} and color:lightgray;) 被清除并且不存在于新类中。

任何想法？

标签： cssreactjstypescriptstyled-components