Селектор потомков элемента стиля React

Question

Я хочу использовать селектор прямого потомка CSS во встроенном элементе стиля React:

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

Это нормально работает на dev, но в prod React (un) услужливо преобразует> в gt;, облажался мой CSS.

Как я могу сделать прямого потомка во встроенном элементе стиля React?

В качестве альтернативы, как я могу заставить React обрабатывать внутреннее HTML as literal?

У меня есть приложение React с несколькими файлами и страницами, использующим Gatsby, который известен тем, что не позволяет использовать несколько разных CSS для разных страниц. Я также использую вложенные компоненты React, поэтому предоставление классов вложенных компонентов невозможно без изменения node_modules.

Answer 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 />
)

О внутреннем HTML, см. this do c

Answer 2

Если вы настаиваете на использовании дочерних селекторов в CSS с тегами стиля, вы можете использовать свойство dangerouslySetInnerHTML элемента jsx (в данном случае style):

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