Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Стилізація за Допомогою CSS файлу на Практиці | Стилізація в React Додатках
Опановуємо React

book
Стилізація за Допомогою CSS файлу на Практиці

Давайте попрактикуємось у створенні компонента картки, що складається з трьох компонентів. Ми прагнемо використати різні компоненти та застосувати стилі, щоб зробити її візуально привабливою. Ми будемо діяти крок за кроком, щоб досягти цього.

Перш ніж ми почнемо, давайте вивчимо функціональність спеціального пропса під назвою children, який дозволяє нам передавати компоненти, елементи або текст як дочірні елементи. Ось як це працює:

jsx
const App = () => (
<Container>
<Notification />
<Message />
</Container>
);

Компонент Container містить проп children, який міститиме компоненти Notification та Message. Будь-який вміст, розміщений між відкриваючим та закриваючим тегами компонента Container, буде розглядатися як його дочірні елементи.

Компонент Container має наступний код:

jsx
const Container = (props) => (
<div>{props.children}</div>
);

Примітка

Прості пропси визначаються явно, і доступ до них здійснюється за їхніми конкретними іменами у компоненті. З іншого боку, проп children дозволяє нам передавати компоненти, елементи або текст як дочірні до компонента без явного визначення імені пропу. Він представляє вміст між відкриваючим та закриваючим тегами компонента.

Ми можемо починати.

Крок 1

Створюємо всі необхідні компоненти: Container, UserImage та UserInfo. Створимо весь додаток, включивши ці компоненти в компонент App.

Приклад:

jsx
// 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>
);

Крок 2

Переконайтеся, що всі необхідні імена класів додано до елементів за допомогою атрибуту className.

jsx
// 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>
);

Крок 3

Імпортуємо файл CSS у файл, який містить усі компоненти. Зробимо це у верхній частині файлу.

js
import "./index.css"; // Importing the CSS file

Крок 4

Нарешті, ми маємо свободу застосовувати будь-які стилі відповідно до наших уподобань.

css
/* 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;
}

Повний код програми:

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 6

Запитати АІ

expand
ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

We use cookies to make your experience better!
some-alt