Цвет React Loader Spinner не меняется

У меня есть проект Next.js. Я сделаю React-loader-spinner с использованием анимации. Но цвет анимации не работает. Я добавил встроенный стиль и собственный класс, но он по-прежнему использует значение по умолчанию. Как я могу это решить?

Я хочу изменить изменение цвета компонента.

            <RotatingLines
                visible = {true}
                height = "36"
                width = "36"
                color = "gray"
                strokeWidth = "5"
                animationDuration = "0.75"
                ariaLabel = "rotating-lines-loading"
                wrapperStyle = {{}}
                wrapperClass = ""
                style = {{ stroke: '#fff' }}
                className = "text-white stroke-white"
            />

Откуда вы импортируете компонент RotatingLines??

jarivak 28.06.2024 07:15

@jarivak Если вы спрашиваете о пакете, который я использовал, я использовал этот. ссылка Если вы спрашиваете как код React, вот как его использовать: import { RotatingLines } из "react-loader-spinner"

Mlhkrtss 29.06.2024 09:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Чтобы изменить цвет компонента <RotatingLines />, вам необходимо добавить свойство strokeColor.

Посмотреть рабочий предварительный просмотр можно здесь — https://codesandbox.io/p/sandbox/react-spinner-2gf9jl?file=%2Fsrc%2FApp.js%3A8%2C21

Документацию по доступным реквизитам можно найти здесь — https://mhnpd.github.io/react-loader-spinner/docs/comComponents/rotating-lines

Фрагмент кода прикреплен ниже

<RotatingLines
  visible
  height = "36"
  width = "36"
  strokeWidth = "5"
  strokeColor = "gray"
  animationDuration = "0.75"
  ariaLabel = "rotating-lines-loading"
  className = "text-white stroke-white"
/>

Другие вопросы по теме