4 cách để style React components

CSS Stylesheet

Đơn giản là bạn chỉ cần import file CSS vào component bạn muốn style.

Ví dụ ta có file DottedBox.css như sau

.DottedBox { margin: 40px; border: 5px dotted pink;
} .DottedBox_content { font-size: 15px; text-align: center;
}

Để dùng CSS này style cho component DottedBox, ta import file này vào component DottedBox.

import React from 'react';
import './DottedBox.css'; const DottedBox = () => ( <div className="DottedBox"> <p className="DottedBox_content">Get started with CSS styling</p> </div>
); export default DottedBox;

Inline styling

Với React, inline style không được thể hiện bằng một string mà bằng một object.

Ví dụ component Box:

import React from 'react'; const divStyle = { margin: '40px', border: '5px solid pink'
}; const pStyle = { fontSize: '15px', textAlign: 'center'
}; const Box = () => (
<div style={divStyle}> <p style={pStyle}>Get started with inline style</p>
</div>
); export default Box;

Ta có thể tạo biến để lưu những style object này và truyền vào element bằng style={tenBien} hoặc ta có thể style trực tiếp element ví dụ style={{color: 'pink'}}.

CSS Modules

Với việc dùng CSS Module tên class và animation được giới hạn để chỉ apply cho riêng một component.

Ví dụ file DashedBox.css:

:local(.container) { margin: 40px; border: 5px dashed pink;
} :local(.content) { font-size: 15px; text-align: center;
}

:local(.tenClass) khi dùng với create-react-app và .tenClass khi không dùng với create-react-app. Ta import file CSS vào component và access tên class trong file CSS giống như ta access một object vậy.

import React from 'react';
import styles from './DashedBox.css'; const DashedBox = () => ( <div className={styles.container}> <p className={styles.content}>Get started with CSS Modules style</p> </div>
); export default DashedBox;

Như ở trên apply style của class container cho một div với

. . .
{ test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
. . .

<div class="DashedBox__container__1DA66"> <p class="DashedBox__content__X37D1"}>Get started with CSS Modules style</p>
</div>

.DashedBox__container__1DA66 { margin: 40px; border: 5px dashed pink;
} .DashedBox__content__X37D1 { font-size: 15px; text-align: center;
}

import React from "react"
import styled from "styled-components" const Input = styled.input` background: green
` const FormWrapper = () => <Input placeholder="hola" /> export default FormWrapper

<input placeholder="hola" class="dxLjPX">Send</input>

.dxLjPX { background: green
}