styled-components

Пару вечеров назад я работал над проектом, который создаю на React.

Убедиться, что я правильно указываю имена классов и импортирую CSS-файлы в нужные места, — это то, что я уже делал раньше. В этот раз ни один из моих стилей не применялся, и я сделал все возможное для устранения неполадок. Поэтому я зашел в Google и поискал «стилизация в React». Я знаю, что это очень широкие условия поиска, но это помогло мне найти styled-components.

Что такое стилизованные компоненты?

Вкратце, styled-components позволяют писать CSS в JS-файлах.

Я никогда раньше не использовал styled-components, и помню, что слышал о них лишь вскользь.

Сначала мне нужно было установить пакет styled-components. Для этого я запустил:

npm i styled-components

Затем я приступил к работе над файлом Footer.js.

Компонент Footer получился вот таким:

import { Link } from 'react-router-dom'
import styled from 'styled-components'

const SiteFooter = styled.footer `
  position: fixed;
  background-color: #8FBB99;
  bottom: 0;
  width: 100%;
`

const linkStyle = {
  margin: "1rem",
  textDecoration: "none",
  color: "white",
}


function Footer() {
  return (
    <SiteFooter>
      <Link to="/contact" style={linkStyle}>
        Contact
      </Link>
    </SiteFooter>
  )
}

export default Footer;
Вход в полноэкранный режим Выход из полноэкранного режима

И вуаля! У нас есть футер 🎉

Импортируя styled из пакета styled-components, я могу создать компонент React, который будет рендерить выбранный элемент HTML.

Допустим, я хочу сделать div, который представляет собой красный квадрат. Styled-components позволяет мне сослаться на красный квадрат как на компонент, который я могу назвать … RedSquare.

const RedSquare = styled.div`
    width: 100px;
    height: 100px;
    background-color: red;
`
Вход в полноэкранный режим Выход из полноэкранного режима

В SiteFooter вы заметите, что CSS написан внутри обратных галочек — это тегированные литералы шаблона. Простой способ представить тегированные литералы шаблона — это как функцию.

Преимущества использования стилизованных компонентов

Футер был отличной причиной для использования styled-components, потому что он требует минимального оформления.

Поскольку я обработал всю стилизацию в самом компоненте, мне не нужно искать в файлах имя класса и вносить изменения. Стилизация, разметка и логика находятся в одном файле, что делает работу разработчика более удобной.

Это была настоящая развязка в моем глубоком погружении в React!

А что вам больше всего нравится в React?

Оцените статью
devanswers.ru
Добавить комментарий