Result University

Привет! Сегодня разберём, как использовать стили в React. Этот вопрос спрашивают на собесах, да и в личку он тоже прилетал.



Поехали...



👉 Можно просто импортировать стили в файл компонента

import "./styles";

Здесь также можно использовать CSS модули, чтобы использовать одни и те же имена классов без конфликтов стилей. Почитать подробнее можно в документации.



👉 Можно добавлять inline стили для элементов.

Атрибут style принимает объект JavaScript со стилями (в camelCase)

const divStyle = {

  color: 'blue',  

  backgroundColor: 'white'

};



function HelloWorldComponent() {  

  return (

    <div style={divStyle}>    

      Hello World!  

    </div>

  );

}

👉 «CSS-in-JS»

Это паттерн, в котором CSS создаётся при помощи JavaScript, вместо того, чтобы писать его во внешних файлах. Данная функциональность не входит в React из коробки, а предоставляется сторонними библиотеками, например «styled-components».



Пример:

import styled from "styled-components";



const StyledDiv = styled.div`

  color: blue;  

  background-color: white;

`;



function HelloWorldComponent() {  

  return (

    <StyledDiv>    

      Hello World!  

    </StyledDiv>

  );

}

✅ Как вам такая шпаргалка, полезно?



Напишите в комментариях, используете ли React на своих проектах, или, может, только начали его изучать? Интересно будет почитать 😉



#шпаргалка #react