CSS In React

خوب می دونید که در jsx می تونیم به صورت inline به چیزایی که می خوایم style بدیم.

const Headers = props => {
const { brand } = props;
return (
<div>
<h1 style={{ color: "blue" }}>{brand}</h1>
</div>
);
};

و همینطور می تونیم یه متغییر تعریف کنیم

const Headers = props => {
const { brand } = props;
return (
<div>
<h1 style={headingStyle}>{brand}</h1>
</div>
);
};
Headers.defaultProps = {
brand: "my app"
};
Headers.propTypes = {
brand: PropTypes.object.isRequired
};
const headingStyle = {
color: "green",
fontSize: "50px"
};
export default Headers;

همینطور می تونیم یه یه فایل جدید css درست کنیم .

, import ش می کنیم

import "../component/header.css"

برای نصب بوت استرپ هم

npm install bootstrap

بعد اینطوری importش می کنیم

import "bootstrap/dist/css/bootstrap.min.css"