React 样式元素后代选择器答案

【问题标题】：React style element descendant selectorReact 样式元素后代选择器
【发布时间】：2020-08-11 13:16:15
【问题描述】：

我想在 React 内联样式元素中使用直接后代 CSS 选择器：

 <style>{`
  .something>div{
    color: blue;
  }
`}</style>

这在 dev 上运行良好，但在 prod 中，React（未）帮助将 > 转换为 gt;，搞砸了我的 CSS。

如何在 React 内联样式元素中创建直系后代？

另外，我怎样才能让 React 将 innerHTML 视为文字？

我有一个使用 Gatsby 的包含多个文件和页面的 React 应用程序，该应用程序因不允许不同页面使用多个不同的 CSS 而臭名昭著。我也在使用嵌套的 React 组件，因此在不修改 node_modules 的情况下提供嵌套组件类不是一种选择。

【问题讨论】：

你在使用样式库吗？
不。为什么在你不能的时候会有额外的依赖
但我以前使用过 styled，它可能会解决问题......或者它可能不会
我以为你在使用样式库，因为我没有像这样使用 <style> 元素。直到我今天尝试才知道它会起作用。每天学些新东西。您可以将代码添加到全局 CSS 样式表中吗？
我没有全局 CSS，因为 gatsby 将全局样式表放在每个页面上，这绝对会弄乱我的样式:(

标签： css reactjs

【解决方案1】：

试试styled-components，你可以用它写出类似原生css的风格。例如

import styled, { css } from 'styled-components'

const ToTop = styled.button`
    position: fixed;
    right: 10px;
    bottom: 10px;
    polyline {
        stroke:#000;
        ${otherStyles}
    }
    &: hover{
        background: #dcc9c9;
    }
`

export default () => (
    <ToTop />
)

关于InnerHTML，见this doc

【讨论】：

我肯定会负责任地使用这种新发现的力量；）

【解决方案2】：

如果您坚持在 CSS 中使用带有样式标签的子选择器，您可以使用 jsx（在本例中为样式）元素的 dangerouslySetInnerHTML 属性：

<style dangerouslySetInnerHTML={`
div>p{
 color:blue;
}
`}/>

【讨论】：

语法很危险SetInnerHTML={{__html:html}}。