How do I incorporate both CSS.Properties and regular JSX styling into a React JSX div?

Question

The code below is throwing errors, specifically the part that has asterisks around it.

import CSS from "csstype";

const circleAroundNumber: CSS.Properties = {
  borderRadius: "50%",
  width: "70px",
  height: "70px",
  padding: "8px",

  background: "#fff",
  borderBlockWidth: "2px",
  borderBlockColor: "black",
  textAlign: "center",

  fontSize: "32px",
  fontFamily: "Arial, sans-serif",
};

interface Props {
  num: number;
  positionx: number;
  positiony: number;
  ballColor: string;
}

function Ball({ num, positionx, positiony, ballColor }: Props) {
  return <div **style={circleAroundNumber, color: {ballColor}}**>{num}</div>;
}

export default Ball;

I have tried style={circleAroundNumber}, which works just fine. I have also tried style={{color: {ballColor}}} which throws me an error. So I guess I have two errors I'm trying to fix. How do I fix color: {ballColor}, and how do I combine circleAroundNumber and color: {ballColor} together?

Answer 1

spread operator might be help for combine multiple style object.please try this

function Ball({ num, positionx, positiony, ballColor }: Props) {
  const combinedStyles: CSS.Properties = {
    ...circleAroundNumber,
    color: ballColor,
  };

  return <div style={combinedStyles}>{num}</div>;
}