Primeros pasos

En esta sección, instalaremos y conectaremos EffCSS a tu página.

Luego, escribiremos una función sencilla para crear hojas de estilo y la aplicaremos.

Instalación

Escribe en tu terminal:

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

Conectar

Para usar EffCSS necesitas un proveedor de estilos. Simplemente llama a la función useStyleProvider:

import { useStyleProvider } from 'effcss';

const provider = useStyleProvider({
    // you can pass custom settings here
});

El proveedor de estilos se puede configurar. Consulta todas las opciones y atributos disponibles en la sección correspondiente.

Uso

Las hojas de estilo CSS se pueden crear con el generador de hojas de estilo. Se trata simplemente de una función que devuelve un objeto o una cadena con los estilos.

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = () => {
    const flexColumn = {
        display: 'flex',
        flexDirection: 'column',
    };
    return {
        html: {
            fontSize: '16px',
        },
        '.card': {
            width: '10rem',
            ...flexColumn,
            '.card__header': {
                height: '2rem',
            },
            '.card__body': flexColumn,
            ':hover': {
                borderRadius: '1rem',
            },
        },
    };
};

Tenga en cuenta que los nombres de las propiedades CSS se pueden escribir en formato camelCase.

Luego, use el proveedor para agregar esta hoja de estilos a la página mediante:

import { useStyleProvider } from 'effcss';
import { maker } from './maker';

const provider = useStyleProvider();
provider.use(maker);

¡Enhorabuena! Tus estilos se han aplicado a la página. Sencillo, ¿verdad?

De hecho, EffCSS puede simplificar la creación de hojas de estilo mediante el argumento utilities. Consulta la siguiente sección para más detalles.