Selector matching a descendant element in React styling

Question

Selector matching a descendant element in React styling

I am facing a challenge with using the direct descendant CSS selector within a React inline style element:

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

While this works fine in development, in production React replaces > with gt;, causing issues with my CSS.

Is there a way to achieve direct descendant styling in a React inline style element?

Alternatively, how can I make sure React treats the innerHTML as literal?

In my React app built with Gatsby, I have multiple files and pages where I need different CSS styles. However, due to restrictions in Gatsby, it is challenging to achieve this. Additionally, since I am using nested React components, modifying node_modules to assign classes to nested components is not ideal. Any suggestions on how to work around these limitations would be appreciated.

css reactjs

Answer 1

Answer №1

If you're looking for a way to write styles similar to native CSS in your React project, consider using styled-components. With styled-components, you can easily write CSS styles directly inside your components. Here's an example:

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

For more information on dangerously setting innerHTML in React, refer to this documentation.

Answer 2

If you're looking for a way to write styles similar to native CSS in your React project, consider using styled-components. With styled-components, you can easily write CSS styles directly inside your components. Here's an example:

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

For more information on dangerously setting innerHTML in React, refer to this documentation.

Answer 3

Answer №2

For those who are determined to employ child selectors in CSS alongside style tags, one workaround is to utilize the dangerouslySetInnerHTML property of a jsx (in this instance, style) element:

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

Answer 4

For those who are determined to employ child selectors in CSS alongside style tags, one workaround is to utilize the dangerouslySetInnerHTML property of a jsx (in this instance, style) element:

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

Selector matching a descendant element in React styling

Answer №1

Answer №2

Similar questions

Adjust the default margins and padding of email header images specifically for Outlook emails

conceal the HTML code from the students

Flexbox margins (exceeding 100% total width)

Every time I hit the play button on my video player, it starts playing multiple videos simultaneously on the same page

Building React Typescript Components with Froala Editor Plugins

I am successfully retrieving the data with Axios, but for some reason, I am having trouble properly displaying it on the front end

The HTML embed element is utilized to display multimedia content within a webpage, encompassing

How to work with multiple selections in React material-ui Autocomplete

"Create a div element with resizable capabilities, similar to a

Sublime Text 3 for React.js: Unveiling the Syntax Files

It vanishes as soon as you move your cursor away during the animation

The create-react-app tool has detected that the template was compiled using an outdated version of Handlebars

Ways to adjust the anchor and h1 elements using CSS

CSS: Creative ways to switch up background hues within a grid layout

Enhance the textarea using Javascript when clicked

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

Implementing a color change for icons in React upon onClick event

Is it necessary for each React component to have its own individual stylesheet?

What is the best way to nest a div within a flexbox container?

Do you think there is a more optimal method for achieving this?