Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    You can use it by this two following ways :

    const buttonStyle = {
  borderRadius: "50%",
  margin: "5px",
  width: "70px",
  height: "70px",
  padding: "8px",

  borderBlockWidth: "2px",
  borderBlockColor: "black",
  textAlign: "center",

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

ReactDOM.render(
  <div>
    <button style={{...buttonStyle, ...{color: "blue", background: "aqua"}}}> 1 </button>
    <button style={{...buttonStyle, color: "brown", background: "aquamarine"}}> 2 </button>
  </div>,
  document.getElementById("root")
);
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    Login or Signup to reply.
  2. 0

    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>;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search