Команда «npm install @emotion/core» используется для установки пакета Emotion Core из реестра NPM. Emotion – это популярная библиотека CSS-in-JS, которая позволяет писать стили на JavaScript для компонентов React.
После установки пакета вы можете импортировать необходимые методы и компоненты и использовать их в своем коде. Вот некоторые часто используемые методы, предоставляемые Emotion Core, а также примеры кода:
- 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>;
};
- ключевые кадры: функция
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>;
};
- 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. В библиотеке доступны более продвинутые функции и служебные функции.