CSS pseudo elements in React

Question

I m building React components  I have added CSS inline in the components as suggested in this brilliant presentation by one of the guys behind React  I ve been trying all night to find a way to add CSS pseudo classes inline  like on the slide titled    after  in the presentation  Unfortunately  I do not just need to add the content     property  but also position absolute  -webkit-filter  blur 10px  saturate 2    The slides show how to add content through              but how would you add other properties

User · Answer

Inline styling does not support pseudos or at-rules (e.g., @media). Recommendations range from reimplement CSS features in JavaScript for CSS states like :hover via onMouseEnter and onMouseLeave to using more elements to reproduce pseudo-elements like :after and :before to just use an external stylesheet.

Personally dislike all of those solutions. Reimplementing CSS features via JavaScript does not scale well -- neither does adding superfluous markup.

Imagine a large team wherein each developer is recreating CSS features like :hover. Each developer will do it differently, as teams grow in size, if it can be done, it will be done. Fact is with JavaScript there are about n ways to reimplement CSS features, and over time you can bet on every one of those ways being implemented with the end result being spaghetti code.

So what to do? Use CSS. Granted you asked about inline styling going to assume you're likely in the CSS-in-JS camp (me too!). Have found colocating HTML and CSS to be as valuable as colocating JS and HTML, lots of folks just don't realise it yet (JS-HTML colocation had lots of resistance too at first).

Made a solution in this space called Style It that simply lets your write plaintext CSS in your React components. No need to waste cycles reinventing CSS in JS. Right tool for the right job, here is an example using :after:

npm install style-it --save

Functional Syntax (JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      #heart {
        position: relative;
        width: 100px;
        height: 90px;
      }
      #heart:before,
      #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
      }
      #heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin :100% 100%;
      }
    `,
      <div id="heart" />
    );
  }
}

export default Intro;

JSX Syntax (JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        #heart {
          position: relative;
          width: 100px;
          height: 90px;
        }
        #heart:before,
        #heart:after {
          position: absolute;
          content: "";
          left: 50px;
          top: 0;
          width: 50px;
          height: 80px;
          background: red;
          -moz-border-radius: 50px 50px 0 0;
          border-radius: 50px 50px 0 0;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
          -webkit-transform-origin: 0 100%;
          -moz-transform-origin: 0 100%;
          -ms-transform-origin: 0 100%;
          -o-transform-origin: 0 100%;
          transform-origin: 0 100%;
        }
        #heart:after {
          left: 0;
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          -webkit-transform-origin: 100% 100%;
          -moz-transform-origin: 100% 100%;
          -ms-transform-origin: 100% 100%;
          -o-transform-origin: 100% 100%;
          transform-origin :100% 100%;
        }
     `}

      <div id="heart" />
    </Style>
  }
}

export default Intro;

Heart example pulled from CSS-Tricks

User · Answer

Inline styles cannot be used to target pseudo-classes or pseudo-elements  You need to use a stylesheet   If you want to generate CSS dynamically  then the easiest way is to create a DOM element  lt style gt     lt style dangerouslySetInnerHTML        html           my-special-div after             content   Hello             position  absolute                  join   n        gt   lt  style gt   lt div className  my-special-div  gt  lt  div gt

User · Answer

Depending if you only need a couple attributes to be styled inline you can do something like this solution  and saves you from having to install a special package or create an extra element    https   stackoverflow com a 42000085   lt span class  something  datacustomattribute    gt    Hello  lt  span gt     something  before     content  attr datascustomattribute     position  absolute      Note that the datacustomattribute must start with data and be all lowercase to satisfy React

User · Answer

Not a direct answer to the question  but this may help those who are having trouble creating style information using Typescript    I was getting an error telling me that the following was incorrect   let iconStyle         position   relative       maxHeight   90px       top   25        The error told me that  types of property  position  are incompatible   I have no idea why   I fixed this by adding a strict Typescript declaration  like so   let iconStyle  CSSProperties         position   relative       maxHeight   90px       top   25        This works

User · Answer

Got a reply from  Vjeux over at the React team   Normal HTML CSS    lt div class  something  gt  lt span gt Something lt  span gt  lt  div gt   lt style gt       something  after       content          position  absolute      -webkit-filter  blur 10px  saturate 2      lt  style gt    React with inline style   render  function         return            lt div gt             lt span gt Something lt  span gt             lt div style   position   absolute   WebkitFilter   blur 10px  saturate 2       gt           lt  div gt              The trick is that instead of using   after in CSS in order to create a new element  you should instead create a new element via React  If you don t want to have to add this element everywhere  then make a component that does it for you   For special attributes like -webkit-filter  the way to encode them is by removing dashes - and capitalizing the next letter  So it turns into WebkitFilter  Note that doing   -webkit-filter        should also work

User · Answer

You can use styled components   Install it with npm i styled-components  import React from  react   import styled from  styled-components    const YourEffect   styled div    height  50px    position  relative     amp  after          whatever you want with normal CSS syntax  Here  a custom orange line as example     content          width  60px      height  4px      background  orange     position  absolute      bottom  0      left  0        const YourComponent   props   gt      return        lt YourEffect gt     lt  YourEffect gt         export default YourComponent

[javascript] CSS pseudo elements in React

Examples related to javascript

Examples related to css

Examples related to reactjs

Examples related to pseudo-element