Styling van uw React.js-toepassing met behulp van emotie

Het stylen van een React-toepassing kan een uitdaging zijn, vooral als u uw stijlen georganiseerd en onderhoudbaar wilt houden. Om dit proces te vereenvoudigen, biedt de Emotion-bibliotheek een abstractie op een hoger niveau bovenop CSS.

Wat is emotie?

Emotion is een bibliotheek voor het stylen van React-applicaties die een eenvoudige en efficiënte manier biedt om je stijlen te beheren. Hiermee kunt u CSS in JavaScript schrijven en biedt het een flexibele API voor het vormgeven van uw componenten.

Een van de belangrijkste voordelen van het gebruik van Emotion om uw React-toepassing te stylen, is dat het een efficiëntere manier biedt om uw stijlen te beheren. U kunt bijvoorbeeld identieke klassennamen gebruiken in meerdere componenten zonder het risico te lopen dat er naamconflicten ontstaan bij het werken met CSS/SASS.

De Emotion-bibliotheek past uw stijlen alleen toe op de componenten die ze gebruiken in plaats van op de hele pagina. Dit kan u helpen conflicten met andere stijlen op de pagina te voorkomen en uw code meer modulair en herbruikbaar te maken.

Hoe emotie te installeren

Voer de volgende terminalopdracht uit om de Emotion-bibliotheek aan uw React-toepassing toe te voegen:

npm install --save @emotion/react

De Emotion-bibliotheek zou nu in uw project moeten zijn geïnstalleerd en klaar voor gebruik om uw React-toepassing te stylen.

Styling met de css-prop van Emotion

Zodra je de Emotion-bibliotheek hebt geïnstalleerd, kun je de CSS prop om uw React-applicatie te stylen. De CSS prop is vergelijkbaar met de stijlprop omdat je er stijlen aan kunt doorgeven in de vorm van strings of gewone JavaScript-objecten.

Om uw applicatie te stylen met behulp van de CSS prop, je moet het importeren uit de @emotie/reageren bibliotheek en definieer vervolgens uw stijlen:

/** @jsxImportSource @emotie/Reageer */
importeren Reageer van'Reageer';
importeren {css} van'@emotie/reageren';
functieapp() {
opbrengst (
 opvulling: 0.5rem 1rem;
 rand: geen;
 font-familie: cursief;
 border-radius: 12px;
 kleur: #333333;
 achtergrondkleur: erven;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
`}>
 Klik hier
 </button>
 )
}
exporterenstandaard App;

De eerste coderegel, /** @jsxImportSource @emotion/react */, is een specifieke opmerking die u aan het JSX-bestand moet toevoegen om aan te geven dat de Emotion-bibliotheek moet worden gebruikt als het JSX-pragma voor dat bestand.

In JSX is een pragma een functie die de JSX-syntaxis omzet in regulier JavaScript. React gebruikt standaard de React.createElement functioneren als het JSX-pragma. Echter met de @jsxImportSource opmerking, kunt u een ander pragma specificeren.

In dit geval de @emotie/reageren pragma vertelt JSX om de jsx functie uit de Emotion-bibliotheek om de JSX-code te transformeren. Door de pragma-opmerking toe te voegen aan een JSX-bestand, kunt u de CSS-in-JS-functies van de Emotion-bibliotheek gebruiken in uw componenten.

De knopcomponent geeft een knop weer met een aangepaste stijl. Hier de CSS prop voegt de aangepaste stijl toe aan het knopelement.

De CSS prop ondersteunt ook geneste styling. Met geneste styling kunt u stijlen schrijven die in elkaar genest zijn.

Bijvoorbeeld:

/** @jsxImportSource @emotie/Reageer */
importeren Reageer van'Reageer';
importeren {css} van'@emotie/reageren';
functieapp() {
opbrengst (
 opvulling: 0.5rem 1rem;
 rand: geen;
 font-familie: cursief;
 border-radius: 12px;
 kleur: #333333;
 achtergrondkleur: erven;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &:zweven{
 kleur: #e2e2e2;
 Achtergrond kleur: #333333;
 }
`}>
 Klik hier
 </button>
 )
}
exporterenstandaard App;

In dit voorbeeld gebruikt de declaratie van de zweefstijl de geneste stijlfunctie van de CSS prop. De achtergrond- en lettertypekleur in het bovenstaande codeblok veranderen telkens wanneer u de muisaanwijzer op de knop plaatst.

Objectstijlen doorgeven aan de css Prop

De CSS prop accepteert ook reguliere JavaScript-objectstijlen. Bij het stylen van verschillende componenten kunt u met behulp van objectstijlen stijlen in uw componenten hergebruiken.

Om objectstijlen door te geven aan de CSS prop, definieer de stijlen als een JavaScript-object en geef het door aan de prop:

const stijl = {
 opvulling: '0.5rem 1rem',
 grens: 'geen',
 fontFamilie: 'cursief',
 borderRadius: '12px',
 kleur: '#333333',
 Achtergrond kleur: 'erven',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:zweven': {
 kleur: '#e2e2e2',
 Achtergrond kleur: '#333333',
 }
}
opbrengst (
"app">
Klik op mij</button>
 </div>
);

Merk op dat de CSS-eigenschapsnamen camelCased zijn in plaats van afgebroken. Dit komt omdat de stijlen zijn gedefinieerd als JavaScript-objecten, die camelCase-naamgevingsconventies gebruiken.

Styling met behulp van de gestileerde componenten

De Emotion-bibliotheek maakt ook gebruik van gestileerde componenten bij het stylen van React-applicaties. Gestileerde componenten gebruiken is vergelijkbaar met React-componenten, afgezien van het feit dat ze kant-en-klare stijlen bevatten. Om gestileerde componenten te maken, gebruikt u de gestileerd functie.

De gestileerd Met de functie kunt u herbruikbare gestileerde componenten maken. Om de gestileerd functie, importeer het uit de emotie/stijl bibliotheek.

Om de @emotie/stijl bibliotheek in uw toepassing, installeert u deze in uw project. U kunt dit doen door de volgende opdracht uit te voeren in de terminal van uw project:

npm install @emotion/styled

Na het installeren van de @emotie/stijl bibliotheek, importeer de gestileerd functie en definieer uw stijlen:

importeren gestileerd van"@emotion/stijl";
const Knop = gestileerde.knop({
 opvulling: '0.5rem 1rem',
 grens: 'geen',
 fontFamilie: 'cursief',
 borderRadius: '12px',
 kleur: '#333333',
 Achtergrond kleur: 'erven',
 marginBlockStart: '2rem',
 marginBlockEnd: '2rem',
'&:zweven': {
 kleur: '#e2e2e2',
 Achtergrond kleur: '#333333',
 }
})
exporterenstandaard Knop;

In het bovenstaande codeblok een gestileerde component Knop is gecreëerd. U kunt deze knop in uw React-toepassing gebruiken zoals elk ander React-onderdeel.

Zoals zo:

importeren Reageer van'Reageer';
importeren Knop van'./Knop';
functieapp() {
opbrengst (



Klik op mij</Button>
 </div>
 );
}

exporterenstandaard App;

Het renderen van de app component zal een knop weergeven met de stijlen die zijn gedefinieerd in het Knop onderdeel op uw scherm.

De gestileerd functie accepteert ook tekenreeksstijlen. Het ziet er anders uit dan de benadering van objectstijlen, maar werkt op dezelfde manier.

importeren gestileerd van"@emotion/stijl";
const Knop = gestileerde.knop`
 opvulling: 0.5rem 1rem;
 rand: geen;
 font-familie: cursief;
 border-radius: 12px;
 kleur: #333333;
 achtergrondkleur: erven;
 margin-block-start: 2rem;
 margin-block-end: 2rem;
 &: zweef {
 kleur: #e2e2e2;
 Achtergrond kleur: #333333;
 }
`
exporterenstandaard Knop;

Efficiënte styling met emotie

Emotion is een krachtige bibliotheek voor het stylen van React-componenten die een eenvoudige en efficiënte manier biedt om je stijlen te beheren. Of je nu een beginner bent of een ervaren ontwikkelaar, Emotion kan helpen om het stylingproces van je React-applicatie te vereenvoudigen en het gemakkelijker te maken om je code te onderhouden en te schalen.

Dus als u op zoek bent naar een efficiëntere en flexibelere manier om uw React-componenten te stylen, overweeg dan Emotion.