Введение в Emotion Core: библиотека CSS-in-JS для React

Команда «npm install @emotion/core» используется для установки пакета Emotion Core из реестра NPM. Emotion – это популярная библиотека CSS-in-JS, которая позволяет писать стили на JavaScript для компонентов React.

После установки пакета вы можете импортировать необходимые методы и компоненты и использовать их в своем коде. Вот некоторые часто используемые методы, предоставляемые Emotion Core, а также примеры кода:

  1. css: функция cssиспользуется для определения и создания стилей CSS.
import { css } from '@emotion/core';
const styles = css`
  color: blue;
  font-size: 16px;
`;
// Usage in a component
const MyComponent = () => {
  return <div css={styles}>Hello, Emotion!</div>;
};
  1. ключевые кадры: функция keyframesиспользуется для определения анимации ключевых кадров CSS.
import { keyframes } from '@emotion/core';
const fadeIn = keyframes`
  0% { opacity: 0; }
  100% { opacity: 1; }
`;
// Usage in a component
const MyComponent = () => {
  return <div css={{ animation: `${fadeIn} 1s ease-in-out` }}>Fading in...</div>;
};
  1. Global: компонент Globalиспользуется для определения глобальных стилей.
import { Global } from '@emotion/core';
const globalStyles = `
  body {
    background-color: #f0f0f0;
  }
`;
// Usage in a component
const App = () => {
  return (
    <>
      <Global styles={globalStyles} />
      <div>My App</div>
    </>
  );
};

Это всего лишь несколько примеров методов, предоставляемых Emotion Core. В библиотеке доступны более продвинутые функции и служебные функции.