CSS pseudo elements in React

by

Got a reply from @Vjeux over at the React team:

Normal HTML/CSS:

<div class="something"><span>Something</span></div>
<style>
    .something::after {
    content: '';
    position: absolute;
    -webkit-filter: blur(10px) saturate(2);
}
</style>

React with inline style:

render: function() {
    return (
        <div>
          <span>Something</span>
          <div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
        </div>
    );
},

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.

More Related Contents:

  1. How to create a translucent in React Native?
  2. styled components final styles are injected directly in DOM with tag, with style tag injection does performance gets affected?
  3. Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
  4. Changing CSS pseudo-element styles via JavaScript [duplicate]
  5. React Js conditionally applying class attributes
  6. Scrollable div to stick to bottom, when outer div changes in size
  7. How to update placeholder color using Javascript?
  8. How to add multiple classes to a ReactJS Component?
  9. javascript change background color on click [closed]
  10. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  11. Event timeline with animation
  12. css position absolute making the textbox go down
  13. Adding a new line in a JSX string inside a paragraph – React
  14. unable to scroll in scrollView
  15. Images not loading when relative path is used in React
  16. using css modules how do I define more than one style name
  17. How to Access styles from React?
  18. Applying className/onClick/onChange not working on Custom React Component
  19. When should I use brackets with imports
  20. Uncaught Error: Invariant Violation: findComponentRoot(…, …$110): Unable to find element. This probably means the DOM was unexpectedly mutated
  21. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  22. Error: How to serialize data from getStaticProps : Next.js
  23. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  24. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  25. stop dragging after a limit has reached
  26. Equivalent to componentDidUpdate using React hooks
  27. reactjs event listener beforeunload added but not removed
  28. React – Dynamically Import Components
  29. Clean way to programmatically use CSS transitions from JS?
  30. FastAPI is not returning cookies to React frontend

Leave a Comment