Компонентод Inline хэвжүүлэлт хийх нь javascript кодтой холилдон тийм аятайхан бус санагдаж байж болох. Кодлогчид css хэвжүүлэлтийг тусдаа файлд гаргаад хэрэгтэй файлдаа татан оруулан ашиглахыг ихэнхдээ илүүд үздэг. React -д хэвжүүлэлтийг тусдаа гарган ашиглах боломжтой бөгөөд үүний талаар хичээлд авч үзье.

Манай төсөлд машиний компонентийн Car хавтас байгаа. Компонентийн хэвийг тусдаа css файлд гаргахдаа ихэнхдээ тухайн компонентийн хавтаст шинээр файл үүсдэг тул Car хавтаст Car.css файлыг үүсгэн өгөөд түүнд Car компонентод Inline хэвжүүлэлтээр өгсөн кодийг шилжүүлээд css -ийн хэвжүүлэлтийн дүрмээр өөрчлөн өгвөл.

.Car {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  display: block;
  padding: 10px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14);
  border-radius: 5px;
}

гэж харагдана. Jsx -д хэвжүүлэлтийг javascript обьект байдлаар бичдэг бол тусдаа css файлд бид хэвийг css -ийн дүрмээр тодорхойлон өгөх ёстой. Иймээс олон үгээр бүрдсэн атрибутын camelCase -ээр бичсэн нэрийг - тэмдэгтээр залган өгөхийг дээр хашилтуудыг хасан таслалыг цэг таслалаар солих хэрэгтэй. Жишээ нь Jsx -ийн Inline хэвжүүлэлтийн marginBottom: '10px',  талбарыг css -д margin-bottom: 10px; болгоно. Одоо Car.css файлд үүсгэсэн .Car нэртэй классыг Car компонентод

import React from 'react'

const car = props => (
  <div className="Car">
    <h3>Машиний нэр: {props.name}</h3>
    <p>Он: <strong>{props.year}</strong></p>
    <input type="text" onChange={props.onChangeName} value={props.name} />
    <button onClick={props.onDelete}>Устгах</button>
  </div>
)
export default car

гэж заан өгөөд yarn start командаар төслийн компиляцийг хийн хөтөч дээр нээгдэх хуудсыг харвал

Машиний мэдээллийг багцлагч div -д Car класс хэрэгжээгүй харагдана. Та тусдаа css файл ашиглаж байсан бол шалтгааныг мэдэж байгаа байх. Car.css файл үүсгэн хэвүүдийг тодорхойлсон ч түүнийг төслийн кодийн багцад оруулахыг гараас заан оруулан ирэх хэрэгтэй. Үүнийг хийгээгүй тул машиний мэдээллийг багцлагч div -д Car класс хэрэгжээгүй хэрэг. Иймээс Car компонентод Car.css файлыг

import React from 'react'
import './Car.css'

const car = props => (
  <div className="Car">
    <h3>Машиний нэр: {props.name}</h3>
    <p>Он: <strong>{props.year}</strong></p>
    <input type="text" onChange={props.onChangeName} value={props.name} />
    <button onClick={props.onDelete}>Устгах</button>
  </div>
)
export default car

импортлон өгье. Одоо react сан import './Car.css' бичлэгийг ойлгон файлд тодорхойлсон классуудыг хэвжүүлэлтэд хэрэгжүүлэх болно. Өөрчлөлтийг хадгалаад хуудсаа шалгавал

Car.css файлд үүсгэсэн хэвүүдээр машиний мэдээллийг багцлагч div -ийг хэвжүүлсэн нь харагдана.
Дүгнэн хэлбэл компонентийн хэвжүүлэлтийг тусдаа файлаар хийхийг хүсвэл компонентийн хавтаст css хэвийн тодорхойлолтыг агуулсан файл үүсгээд түүнийг компонентод импортлоод шаардлагатай элементүүдэд css файлд тодорхойлсон классыг заан өгөхөд л хангалттай.