Styling av React-komponenter med Emotion

Du vill hantera Styling av React-komponenter på ett modernt och kraftfullt sätt? Med biblioteket Emotion kan du integrera CSS direkt i dina React-komponenter och så effektivt designa din användargränssnitt. I denna handledning förklarar jag grunderna i att styla med Emotion, hur du installerar och använder biblioteket och ger dig några användbara tips.

Viktigaste insikter

• Emotion gör det möjligt att skriva CSS i JavaScript och erbjuder en intuitiv hantering.
• Med Emotion kan du använda olika stylings-tekniker, inklusive template literals och användning av css-Props.
• Stylhantering blir mer modulär genom att använda Emotion, vilket förbättrar återanvändbarhet och läsbarhet.

Steg-för-steg-guide

1. Installera Emotion

Först måste du installera Emotion i ditt projekt. Öppna terminalen och navigera till din projektmapp. Här kör du följande kommando för att installera emotion-biblioteket:

npm install @emotion/react @emotion/styled

2. Importera CSS

I din App.jsx-fil kan du använda Emotion. Du bör importera Emotion för att använda css-funktionen och importera styled-elementet. Lägg till följande i början av din fil:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

3. Styla med Template Literals

Använd Emotions css-funktion för att skapa en CSS-variabel. Definiera CSS-konventioner med hjälp av template literals. Här är ett exempel på hur du kan skriva en wrapper-klass för din app:

const appStyle = css` display: flex; flex-direction: column; font-size: 16px;
`;

Denna kod använder flexbox för att säkra en layoutanordning.

4. Använda stilen

För att tillämpa den definierade stilen, skicka in appStyle-variabeln i className-prop till ditt huvud-HTML-element. Så här bör det se ut:

function App() { return <div css={appStyle}>Hej världen!</div>;
}

5. Användning av Styled-Components

Förutom att använda css-variabeln kan du också använda Styled-Components med Emotion. För att skapa en Styled-Component kan du använda följande kod:

const Container = styled.div` padding: 20px; background-color: lightblue;
`;

Därmed blir Container en ny komponent baserad på CSS med alla definierade stilar.

6. Infoga mediefrågor

Emotion gör det enkelt att integrera mediefrågor i din CSS. Lägg bara till dem i template literal:

const responsiveStyle = css` @media (max-width: 600px) { font-size: 14px; }
`;

Denna mediefråga ändrar textens teckenstorlek när visningsbredden är mindre än 600 pixlar.

7. Använda hover-effekter

Du kan också definiera hover-effekter för dina CSS-templates enkelt:

const buttonStyle = css` background-color: blue; color: white; &:hover { background-color: darkblue; }
`;

Denna CSS-regel ändrar bakgrundsfärgen på elementet när du sveper över det med musen.

8. Kombinera mer komplexa stilar

Emotion tillåter att kombinera flera klassnamn. Detta möjliggörs med cx-funktionen:

import { css, cx } from '@emotion/react';

const primaryStyle = css color: blue;;

const secondaryStyle = css color: red;;

I det här fallet visas texten både i blått och rött.

9. Kommande utökningar

Om du i framtiden hanterar ett stort projekt kan det vara användbart att organisera dina stilar i olika moduler. Du kan till exempel skapa commonStyles.js och exportera dina grundläggande stilar där:

// commonStyles.js
export const flexCenter = css` display: flex; justify-content: center; align-items: center;
`;

Nu kan du infoga flexCenter i varje annan komponent.

10. Tester och anpassningar

Ladda in din applikation i webbläsaren och kontrollera om stilarna visas korrekt. Testa olika stilar och se resultatet i realtid.

Sammanfattning

Med en kombination av Emotion och React är det möjligt att skapa realistiska UI-layouter. Emotion tillåter att definiera och effektivt hantera CSS direkt i JavaScript. På så sätt kan du dra nytta av skärmtydets fördelar och en nära integration mellan logik och styling.