Styles build

Styles build es una npm que te ayudara a organizar mas tu css en tu proyecto de react

Intalaciones

npm i styles-build@latest

yarn add styles-build@latest

pnpm add styles-build@latest

bun add styles-build@latest

Ejemplos

Javascript

import React from "react";
import styled from "styles-build";

export default function App() {
  const StyledDiv = styled("h1")({
 animation: {
    duration: '4s',
    timingFunction: 'ease-in-out',
    delay: '1s',
    iterationCount: 'infinite',
    animationStyle: `@keyframes customAnimation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }`
  },
  styles: {
     color: red,
     fontSize: 100px,
  },
  });
  const StyledDiv2 = styled("h1")({
 animation: {
    duration: '4s',
    timingFunction: 'ease-in-out',
    delay: '1s',
    iterationCount: 'infinite',
    animationStyle: `@keyframes customAnimation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }`
  },
  styles: {
     color: red,
     fontSize: 100px,
  },
  });
  
  return (
<>
<StyledDiv>Hello World!</StyledDiv>
    <StyledDiv2>Hola mundo2</StyledDiv2>
</>
  );
}

Typescript

import React from "react";
import styled from "styles-build";

interface StyledDivProps {
  animation: string;
  styles: string;
  duration: string;
  timingFunction: string;
  delay: string;
  infinite: boolean;
  iterationCount: number;
  animationStyle: string;
}

const App: React.FC = () => {
  const StyledDiv = styled("h1")<StyledDivProps>({
 animation: {
    duration: '4s',
    timingFunction: 'ease-in-out',
    delay: '1s',
    iterationCount: 'infinite',
    animationStyle: `@keyframes customAnimation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }`
  },
  styles: {
     color: red,
     fontSize: 100px,
  },
  });

  const StyledDiv2 = styled("h1")<StyledDivProps>({
 animation: {
    duration: '4s',
    timingFunction: 'ease-in-out',
    delay: '1s',
    iterationCount: 'infinite',
    animationStyle: `@keyframes customAnimation {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }`
  },
  styles: {
     color: red,
     fontSize: 100px,
  },
  });

  return (
    <>
      <StyledDiv>Hello World!</StyledDiv>
      <StyledDiv2>Hola mundo2</StyledDiv2>
    </>
  );
};

export default App;