PuffLoader, react spinner

Question

in this code PuffLoader was used from react-spinners plugin for loader

component code

import React from "react";
import { css } from "@emotion/react";
import PuffLoader from "react-spinners/PuffLoader";

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
export default function Loading ({size}:{size:number}) {
  return (
     <PuffLoader css={override} size={size || 60} />;

  );
}

found this on css attribute when passed to PuffLoader component

error

Type '{ css: SerializedStyles; size: number; }' is not assignable to type 'IntrinsicAttributes & LoaderSizeProps'.Property 'css' does not exist on type 'IntrinsicAttributes & LoaderSizeProps'

score 0 · Answer 1 · answered Oct 11 '22 at 03:10

The latest version of react-spinners no longer has @emotion/react as a dependency. You can just pass a style object

import React from "react";
import PuffLoader from "react-spinners/PuffLoader";

const override = {
  display: 'block',
  margin: '0 auto',
  borderColor: 'red'
};

export default function Loading ({size}:{size:number}) {
  return (
     <PuffLoader cssOverride={override} size={size || 60} />
  );
}

That should work.

PuffLoader, react spinner

1 Answers1