javascript - 使用 Styled-Components 重新创建 HTML/CSS 行为

Question

我在 React 应用程序中使用 Styled-Components 时遇到了一个相当烦人的问题。HTML 元素的类名非常重要，样式组件的动态性（通过 props 传递）也是如此。因此，两者都使用很重要。

tl；博士我想在 CSS（而不是HTML）中使用类名，而不必创建空组件或其他东西。

我有一个具有动态类名的类，让我们保持“style-123”，其中“123”通过状态动态更改，并且对于与当前设置进行奇偶校验很重要。（IMO，类名的动态特性阻止了解决方案。）“style-123”类名用于其他 HTML 元素，但它本身不是组件，因此不应显示为 HTML 元素。

我有一个类名为“component-a”的组件（“ComponentA”）。该组件的 HTML 应如下所示：

<div class="component-a">
   HELLO
</div>

其样式（在开发工具中）应如下所示：

.style-123 .component-a {
    margin-left: -2%;
}

我们现在看到添加的类（“style-123”）。这应该是最终结果。

HTML 的一般结构如下：

<div class="name-whatever style-123 another-classname">
   <div>
      <div class="component-a">
      </div>
   </div>
</div>

问题 我似乎无法将“component-a”隔离为“ComponentA”的HTML类名，同时.style-123 .component-a通过 styled-components 应用 CSS。为了使 HTML 具有独立的类名，组件 (JSX) 需要：

<ComponentA className={'component-a'}/>

和样式化的组件：

const ComponentA = styled.div`
   &.component-a {
      color: red;
   }
`

这是我知道如何将 JSX 中的组件与其对应的样式组件链接起来的唯一方法。

我不能做：

<ComponentA className={'component-a'}/>

和样式化的组件：

const ComponentA = styled.div`
   &.style-123 .component-a {
      color: red;
   }
`

因为这不会应用样式，因为存在类名不匹配。

在过去的几个小时里，我尝试了许多 SASS 的组合，所有的 & 和箭头和加号等。我希望这通过 styled-components 是可行的，因为我需要声明类名并具有动态的类名以及 CSS 属性和值，所有这些都通过 props 传递。如果有另一种不使用样式组件但保持这种活力的解决方案，我对此持开放态度。

谢谢你的时间。

标签： javascripthtmlcssreactjsstyled-components