useCss.md

useCss

Vue 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 'vue-next-use';

const Demo = {
  setup(){
      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',
    }
  },
});