Рубрики
Без рубрики

Стиль React Component со стильными компонентами: часть-1

Укладка вашего компонента React – важная часть для любого применения реального мира. Мы можем стильно реагировать … Теги с JavaScript, React, стиль компонента.

Укладка вашего компонента React – важная часть для любого применения реального мира. Мы можем стиль реагировать компоненты пару способов. Такие как –

  1. встроенный стиль
  2. CSS модули
  3. эмоция
  4. Стильные компоненты

Мы поговорим о стилизованных компонентах в этой статье.

Мы создадим одну простую анимированную загрузку спиннерного компонента.

Мы можем установить пакет из NPMJS, используя NPM или Yarn CLI. NPM я стиль - компоненты --save Или пряжа добавляет стилизованные компоненты

Мы можем импортировать, что в нашем компонентном модуле, как Импорт, созданный из «Стильных компонентов»;

Теперь я буду использовать в стиле API для создания спиннера. Мы используем One Div в качестве цели для этого Spinner.

const StyledSpinner = styled.div`
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;

  @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
`;

Теперь мы можем использовать это как компонент реагирования.

class Spinner extends Component {
  render() {
    return (
      
    );
  }
}

Нам не нужен какой-либо другой инструмент или веб-пакет для создания этого CSS. Это будет работать просто хорошо.

Я буду продолжать писать больше на стилизованные компоненты.

Обновить часть 2 доступна в Стиль React Component со стильными компонентами: Часть 2

Ваше здоровье! 👋

Как я пытаюсь внести содержание в Интернете, вы можете купить мне кофе для моих часов, потраченных на все эти ❤️😊 🌸

PS: Вы также можете посмотреть на моем блоге https://shahjada.me.

Оригинал: “https://dev.to/destro_mas/style-react-component-with-styled-components-part-1-19fl”