react-use/docs/useCss.md

useCss

React UI hook that changes CSS dynamically. Works like "virtual CSS" — it re-renders only CSS rules that change. It is different from inline styles, because you can use media queries and pseudo selectors.

Usage

import {useCss} from 'react-use';

const Demo = () => {
  const className = useCss({
    color: 'red',
    border: '1px solid red',
    '&:hover': {
      color: 'blue',
    },
  });

  return (
    <div className={className}>
      Hover me!
    </div>
  );
};

Examples

const className = useCss({
  color: 'tomato',
  '&:hover': {
    color: 'orange',
  },
});

const className = useCss({
  svg: {
    fill: 'tomato',
  },
  '.global_class &:hover svg': {
    fill: 'orange',
  },
});

const className = useCss({
  color: 'tomato',
  '@media only screen and (max-width: 600px)': {
    color: 'orange',
    '&:hover': {
      color: 'red',
    }
  },
});