1. Tạo file GlobalStyles component
1.1 Tạo file src/components/GlobalStyles/index.tsx
import './GlobalStyles.scss'; type Props = { children: JSX.Element;
}; function GlobalStyles({ children }: Props) { return children;
} export default GlobalStyles;
1.2 Tạo file src/components/GlobalStyles/GlobalStyles.scss
@import 'normalize.css';
@import url('https://fonts.googleapis.com/css2?family=Roboto:_@.com;400;500;700;900&display=swap'); :root { --primary: #fe2c55;
} html { font-size: 62.5%;
} body { font-family: 'Roboto', sans-serif; font-size: 1.6rem; line-height: 1.5; text-rendering: optimizespeed;
}
2. Cài thư viện reset css và scss
yarn add --save normalize.css
yarn add sass
3. Sửa lại file index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from '~/App';
import GlobalStyles from '~/components/GlobalStyles';
import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render( <React.StrictMode> <GlobalStyles> <App /> </GlobalStyles> </React.StrictMode>,
); // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();