Укладка вашего компонента React – важная часть для любого применения реального мира. Мы можем стиль реагировать компоненты пару способов. Такие как –
- встроенный стиль
- CSS модули
- эмоция
- Стильные компоненты
Мы поговорим о стилизованных компонентах в этой статье.
Мы создадим одну простую анимированную загрузку спиннерного компонента.
Мы можем установить пакет из 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”