CODEWITHSUNDEEP
javascriptcssperformancereactjs
rofrischmann
rofrischmann

Reputation: 349

What's the most performant but full-featured styling method in React.js

I have been reading a lot blog posts, best practices and slides (e.g. CSS in JS by Christopher Chedeau aka 'vjeux' which I think is great).

I totally understand why it is "better" to set your styling directly within your React Component, but I then found out that this might be limited as well. You may not use CSS pseudo-classes nor media queries to handle some responsive styling issues.

As someone who is used to do a lot of work with CSS and lately with SASS (which I still love) this drives me in some kind of cleavage, because I do not want to disclaim any styling property which standard CSS gives me.

My question now is: Is it possible to have your styling within your React Components without those given disadvantages, and if: How would you actually do it to achieve the best performance and maximum of clarity.

Upvotes: 1

Views: 124

Answers (1)

Hicham El Hammouchi
Hicham El Hammouchi

Reputation: 524

Check out https://github.com/FormidableLabs/radium. It's pretty cool. Here's an example where they show how to add media queries among other things.

  var styles = {
    base: {
      backgroundColor: '#0074d9',
      border: 0,
      borderRadius: '0.3em',
      color: '#fff',
      cursor: 'pointer',
      fontSize: 16,
      outline: 'none',
      padding: '0.4em 1em',

      ':hover': {
        backgroundColor: '#0088FF'
      },

      ':focus': {
        backgroundColor: '#0088FF'
      },

      ':active': {
        backgroundColor: '#005299',
        transform: 'translateY(2px)',
      },
      // Media queries must start with @media, and follow the same syntax as CSS
      '@media (min-width: 992px)': {
        padding: '0.6em 1.2em'
      },

      '@media (min-width: 1200px)': {
        padding: '0.8em 1.5em',

        // Media queries can also have nested :hover, :focus, or :active states
        ':hover': {
          backgroundColor: '#329FFF'
        }
      }
    },
    red: {
      backgroundColor: '#d90000',

      ':hover': {
        backgroundColor: '#FF0000'
      },

      ':focus': {
        backgroundColor: '#FF0000'
      },

      ':active': {
        backgroundColor: '#990000'
      }
    }
  };

Upvotes: 2

Related Questions