CSS In React

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

const Headers = props => {
const { brand } = props;
return (
<div>
<h1 style={{ color: &quotblue&quot }}>{brand}</h1>
</div>
);
};

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

const Headers = props => {
const { brand } = props;
return (
<div>
<h1 style={headingStyle}>{brand}</h1>
</div>
);
};
Headers.defaultProps = {
brand: &quotmy app&quot
};
Headers.propTypes = {
brand: PropTypes.object.isRequired
};
const headingStyle = {
color: &quotgreen&quot,
fontSize: &quot50px&quot
};
export default Headers;

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

, import ش می کنیم

import &quot../component/header.css"

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

npm install bootstrap

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

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