Как включить CSS.Properties и обычный стиль JSX в div React JSX?

В приведенном ниже коде выдаются ошибки, особенно в той части, вокруг которой есть звездочки.

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;

я пытался style = {circleAroundNumber}, и это прекрасно работает. я тоже пробовал style = {{color: {ballColor}}} что выдает мне ошибку. Итак, я думаю, у меня есть две ошибки, которые я пытаюсь исправить. Как исправить color: {ballColor} и как объединить circleAroundNumber и color: {ballColor} вместе?

reactjs jsx

29.07.2024 03:43

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать его двумя следующими способами:

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>

29.07.2024 07:11

Ответ принят как подходящий

Оператор распространения может помочь объединить несколько объектов стилей. попробуйте это

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

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

Это сработало! Спасибо!!

— 29.07.2024 15:21

29.07.2024 07:12