Что такое CSS-in-JS?

CSS-in-JS — подход, при котором стили пишутся в JavaScript рядом с компонентом, а библиотека превращает их в CSS.

Пример (styled-components)

import styled from 'styled-components';

const Button = styled.button`
  padding: 8px 16px;
  border-radius: 6px;
  background: ${(props) => (props.$primary ? '#0066ff' : '#eee')};
`;

<Button $primary>Сохранить</Button>;

Плюсы

• стили изолированы — уникальные имена классов генерируются автоматически;
• удобная динамика от props;
• стили, логика и разметка в одном месте, удаляются вместе.

Минусы

• многие библиотеки работают в рантайме и замедляют рендер;
• сложнее SSR, не работают в React Server Components;
• дополнительный размер бандла.

Варианты

• с рантаймом: styled-components, Emotion;
• без рантайма (стили извлекаются при сборке): vanilla-extract, Linaria, Panda CSS.

Коротко для собеседования

CSS-in-JS — стили в JS рядом с компонентом с автоматической изоляцией и динамикой от props; минус рантайм-библиотек — производительность и SSR.

Подробнее: styled-components — Документация