Блог

Я использовал в своих проектах некоторые базовые классы, такие как text-lg, text-md …, .container и т.д. И обычно я писал классы таким образом :

 <div class="article text-lg container">some content</div>
  

Как я могу сделать что-то подобное, используя styled-components? Создайте миксины для этих классов или просто смешайте использование стилизованных компонентов и классов css?

Вы можете использовать помощник css для создания своих базовых классов и их объединения.

 const container = css`
  padding: 20px;
`;
const article = css`
  max-width: 1920px;
`;
const textLg = css`
  font-size: 3rem;
`;

const CustomDiv = styled.div`
  ${container   article   textLg}

  /* other styles here */
  background: black; 
  color: white;
`;
  

Или, если у вас уже есть существующая таблица стилей (например, библиотека CSS, такая как Bootstrap), вы можете просто объединить их с помощью attrs . Это экономит ваше время на переписывание вашего CSS в JS. Официальные документы читайте здесь: https://styled-components.com/docs/faqs#can-i-use-css-frameworks

 const CustomDiv = styled.div.attrs(props => ({
  className: "article text-lg container",
}))`
  /* other styles here */
  background: black; 
  color: white;
`;
  

По сути, результатом будет ваш пользовательский класс со background color свойствами amp; CSS в дополнении article к , text-lg , и container классам, который определен в вашей таблице стилей