Praktisk Bruk av Ekstern CSS
La oss øve ved å lage en kortkomponent bestående av tre komponenter. Målet er å bruke ulike komponenter og anvende stiler for å gjøre den visuelt tiltalende. Vi går frem steg for steg for å oppnå dette.
Før vi begynner, skal vi se nærmere på funksjonaliteten til den spesielle propen children
, som gjør det mulig å sende komponenter, elementer eller tekst som barneelementer. Slik fungerer det:
const App = () => (
<Container>
<Notification />
<Message />
</Container>
);
Container
-komponenten inkluderer en children-prop, som vil inneholde Notification
- og Message
-komponentene. Alt innhold plassert mellom åpnings- og lukkingsmerkene til Container
-komponenten vil bli behandlet som dens children.
Container
-komponenten har følgende kode:
const Container = (props) => (
<div>{props.children}</div>
);
Merk
Enkle props er eksplisitt definert og aksesseres ved å bruke deres spesifikke navn i en komponent.
children
-propen gjør det derimot mulig å sende komponenter, elementer eller tekst som children til en komponent uten å eksplisitt definere et prop-navn. Den representerer innholdet mellom åpnings- og lukkingsmerkene til komponenten.
Vi kan starte.
Steg 1
Vi oppretter alle nødvendige komponenter: Container
, UserImage
og UserInfo
. Hele applikasjonen bygges ved å inkludere disse komponentene i App
-komponenten.
Eksempel:
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => (
<div>{props.children}</div>
);
// `UserImage` component to display user image
const UserImage = () => (
<img
className="image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
alt="user"
width={200}
/>
);
// `UserInfo` component to display user information
const UserInfo = (props) => (
<div>
<p>
<span>Name:</span> {props.name}
</p>
<p>
<span>Age:</span> {props.age}
</p>
<p>
<span>Occupation:</span> {props.occupation}
</p>
</div>
);
// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
<Container>
<UserImage />
<UserInfo name="Michelle" age="36 years" occupation="Accountant" />
</Container>
);
Steg 2
Sørg for at alle nødvendige klassenavn er lagt til elementene ved å bruke className
-attributtet.
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => <div className="container">{props.children}</div>;
// `UserImage` component to display user image
const UserImage = () => (
<img
className="image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
alt="user"
width={200}
/>
);
// `UserInfo` component to display user information
const UserInfo = (props) => (
<div className="description">
<p className="text">
<span className="label">Name:</span> {props.name}
</p>
<p className="text">
<span className="label">Age:</span> {props.age}
</p>
<p className="text">
<span className="label">Occupation:</span> {props.occupation}
</p>
</div>
);
// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
<Container>
<UserImage />
<UserInfo name="Michelle" age="36 years" occupation="Accountant" />
</Container>
);
Steg 3
Importer CSS-filen i filen som inneholder alle komponentene. Dette gjøres øverst i filen.
import "./index.css"; // Importing the CSS file
Steg 4
Til slutt har vi frihet til å bruke hvilke som helst stiler etter egne preferanser.
/* Styling for the `Container` component */
.container {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 3px solid #4f5e77;
border-radius: 10px;
width: 320px;
background-color: #ff8a00;
}
/* Styling for the `UserImage` component */
.image {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
/* Styling for the `UserInfo` component text */
.text {
font-size: 22px;
color: #bbdefb;
}
/* Styling for the `UserInfo` component label */
.label {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
color: #4f5e77;
}
Fullstendig app-kode:
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Awesome!
Completion rate improved to 2.17
Praktisk Bruk av Ekstern CSS
Sveip for å vise menyen
La oss øve ved å lage en kortkomponent bestående av tre komponenter. Målet er å bruke ulike komponenter og anvende stiler for å gjøre den visuelt tiltalende. Vi går frem steg for steg for å oppnå dette.
Før vi begynner, skal vi se nærmere på funksjonaliteten til den spesielle propen children
, som gjør det mulig å sende komponenter, elementer eller tekst som barneelementer. Slik fungerer det:
const App = () => (
<Container>
<Notification />
<Message />
</Container>
);
Container
-komponenten inkluderer en children-prop, som vil inneholde Notification
- og Message
-komponentene. Alt innhold plassert mellom åpnings- og lukkingsmerkene til Container
-komponenten vil bli behandlet som dens children.
Container
-komponenten har følgende kode:
const Container = (props) => (
<div>{props.children}</div>
);
Merk
Enkle props er eksplisitt definert og aksesseres ved å bruke deres spesifikke navn i en komponent.
children
-propen gjør det derimot mulig å sende komponenter, elementer eller tekst som children til en komponent uten å eksplisitt definere et prop-navn. Den representerer innholdet mellom åpnings- og lukkingsmerkene til komponenten.
Vi kan starte.
Steg 1
Vi oppretter alle nødvendige komponenter: Container
, UserImage
og UserInfo
. Hele applikasjonen bygges ved å inkludere disse komponentene i App
-komponenten.
Eksempel:
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => (
<div>{props.children}</div>
);
// `UserImage` component to display user image
const UserImage = () => (
<img
className="image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
alt="user"
width={200}
/>
);
// `UserInfo` component to display user information
const UserInfo = (props) => (
<div>
<p>
<span>Name:</span> {props.name}
</p>
<p>
<span>Age:</span> {props.age}
</p>
<p>
<span>Occupation:</span> {props.occupation}
</p>
</div>
);
// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
<Container>
<UserImage />
<UserInfo name="Michelle" age="36 years" occupation="Accountant" />
</Container>
);
Steg 2
Sørg for at alle nødvendige klassenavn er lagt til elementene ved å bruke className
-attributtet.
// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => <div className="container">{props.children}</div>;
// `UserImage` component to display user image
const UserImage = () => (
<img
className="image"
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
alt="user"
width={200}
/>
);
// `UserInfo` component to display user information
const UserInfo = (props) => (
<div className="description">
<p className="text">
<span className="label">Name:</span> {props.name}
</p>
<p className="text">
<span className="label">Age:</span> {props.age}
</p>
<p className="text">
<span className="label">Occupation:</span> {props.occupation}
</p>
</div>
);
// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
<Container>
<UserImage />
<UserInfo name="Michelle" age="36 years" occupation="Accountant" />
</Container>
);
Steg 3
Importer CSS-filen i filen som inneholder alle komponentene. Dette gjøres øverst i filen.
import "./index.css"; // Importing the CSS file
Steg 4
Til slutt har vi frihet til å bruke hvilke som helst stiler etter egne preferanser.
/* Styling for the `Container` component */
.container {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 3px solid #4f5e77;
border-radius: 10px;
width: 320px;
background-color: #ff8a00;
}
/* Styling for the `UserImage` component */
.image {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
/* Styling for the `UserInfo` component text */
.text {
font-size: 22px;
color: #bbdefb;
}
/* Styling for the `UserInfo` component label */
.label {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
color: #4f5e77;
}
Fullstendig app-kode:
Takk for tilbakemeldingene dine!