Hướng dẫn Styled Components cơ bản

styled-components xây dựng với mục tiêu giữ cho các styles của component nằm chính trong component đó

1. Cài đặt

npm install styled-components

Cách sử dụng

import styled from 'styled-components'

2. Tạo component với các thẻ html cơ bản

import styled from 'styled-components' // Tạo component Title render ra thẻ h1
const StyledTitle = styled.h1` color: red;
` export default function App() { return <StyledTitle>Hello world</StyledTitle>
}

Output ra HTML với class được sinh ra ngẫu nhiên không bị trùng nhau

<h1 class="sc-gsnTZi fZzjcr">Hello world</h1>

Demo: https://codesandbox.io/s/styled-component-html-220lyc?file=/src/App.js

3. Props

Ta có thể truyền props vào các styled components như sau

import styled from 'styled-components' // Tạo component Button với các styles như sau
const StyledButton = styled.button` background: ${props => props.primary ? 'red' : 'white'};
` export default function App() { return ( <> <StyledButton>Normal Button</StyledButton> <StyledButton primary>Primary Button</StyledButton> </> )
}

Demo: https://codesandbox.io/s/styled-components-props-zh1092?file=/src/App.js

4. Extending Styles

Kế thừa style từ component khác

import styled from 'styled-components' // Tạo một component Button
const Button = styled.button` color: blue; font-size: 1em;
` // Tạo một RedButton kế thừa những style 
// từ Button phía trên, ghi đè hoặc thêm mới styles
const RedButton = styled(Button)` color: red; border-color: red;
` export default function App() { return ( <> <Button>Normal Button</Button> <RedButton>Red Button</RedButton> </> )
}

Demo: https://codesandbox.io/s/styled-components-extend-style-q6tq0c?file=/src/App.js

5. Styles với các thư viện khác

Kế thừa cả những component của bên thứ 3

5-1. React router dom

import { BrowserRouter, Link } from 'react-router-dom'
import styled from 'styled-components' // Thực hiện việc import Link từ React-router-dom
// Tạo một component mới kế thừa từ Link component
const StyledLink = styled(Link)` color: red; font-weight: bold;
`
export default function App() { return ( <BrowserRouter> <Link to="/about">Link chưa được CSS</Link> <br /> <StyledLink to="/about">Sau khi CSS</StyledLink> </BrowserRouter> )
}

Demo: https://codesandbox.io/s/styled-component-react-router-dom-28oebw?file=/src/App.js

5-2. Material MUI

Cài đặt thư viện MUI

npm install @mui/material @emotion/react @emotion/styled @mui/styled-engine-sc

import Typography from '@mui/material/Typography'
import styled from 'styled-components' const StyledTypography = styled(Typography)` color: #333333;
` export default function App() { return ( <> <Typography variant="h3" gutterBottom> H3 - MUI </Typography> <StyledTypography variant="h3" gutterBottom> H3 - styled components </StyledTypography> </> )
}

Demo: https://codesandbox.io/s/styled-component-material-ui-r3gplj?file=/src/App.js

5-3. Ant design

Cài đặt thư viện Antd

npm install antd

import 'antd/dist/antd.css'
import { Typography } from 'antd'
import styled from 'styled-components' const {Title} = Typography const StyledTitle = styled(Title)` &.ant-typography { color: red; } /* Cách khác */ /* &&& { color: red; } */
` export default function App() { return ( <> <Title level={2}>H2 - Antd</Title> <StyledTitle level={2}> H2 - styled components </StyledTitle> </> )
}

Demo: https://codesandbox.io/s/styled-component-antd-j8j2q1?file=/src/App.js

6. custom tagName

Với styled-components bạn cũng có thể thay đổi tag name so với định nghĩa ban đầu.

import styled from 'styled-components' const StyledDiv = styled.div` color: red; font-size: 2rem;
` export default function App() { return ( // Thay đổi tag div => section <StyledDiv as="section">Hello World!</StyledDiv> );
}

Demo: https://codesandbox.io/s/styled-component-change-html-1fg2cl?file=/src/App.js

7. CSS Selector

Trong styled-components có thể sử dụng những CSS selector cơ bản như > , + , ~ ...

và sử dụng Nesting như SASS

import styled from 'styled-components' const StyledDiv = styled.div` color: blue; /* div khi được hover */ &:hover { color: red; } /* div nằm phía sau không trực tiếp của div */ & ~ & { background: tomato; } /* div nằm phía sau trực tiếp của div */ & + & { background: lime; } /* div có class là something */ &.something { background: orange; } /* div có class .something nằm bên trong */ & .something { background: red; } /* div nằm bên trong html nào đó có class .something-else */ .something-else & { background: cyan; }
`
export default function App() { return ( <> <StyledDiv>Hello world!</StyledDiv> <StyledDiv>How ya doing?</StyledDiv> <StyledDiv className="something">The sun is shining...</StyledDiv> <div>Pretty nice day today.</div> <StyledDiv>Don't you think?</StyledDiv> <div className="something-else"> <StyledDiv>Splendid.</StyledDiv> </div> </> )
}

Demo: https://codesandbox.io/s/styled-component-css-selector-x7g98s?file=/src/App.js

8. Responsive

Hoạt động tốt với responsive

import styled from 'styled-components' const StyledTitle = styled.h1` background: cyan; color: black; @media screen and (min-width: 768px) { background: tomato; }
` export default function App() { return <StyledTitle>Hello World!</StyledTitle>
}

Demo: https://codesandbox.io/s/styled-component-responsive-n77075?file=/src/App.js

9. Animations

import styled from 'styled-components'
import { keyframes } from 'styled-components' // Tạo keyframes
const rotate = keyframes` from { transform: rotate(0deg) } to { transform: rotate(360deg) }
` // áp dụng vào animation css
const Rotate = styled.div` animation: ${rotate} 2s linear infinite;
` export default function App() { return <Rotate>Something</Rotate>
}

Demo: https://codesandbox.io/s/styled-component-animation-0ogv50?file=/src/App.js

10. With attribute

Kiểu 1: tạo ra button có type là submit

import styled from 'styled-components' const StyledSubmitButton = styled.button.attrs({ type: 'submit'
})` border: none; padding: 10px; color: black; background: violet;
` export default function App() { return ( <> <h1>Hello World</h1> <StyledSubmitButton>Submit Button</StyledSubmitButton> </> )
}

Demo 1: https://codesandbox.io/s/styled-component-attribute1-lsy7yb?file=/src/App.js

Kiểu 2: tạo ra common button, sau đó tạo submit button kế thừa từ button này

import styled from 'styled-components' const StyledButton = styled.button` border: none; padding: 10px; color: black;
` const StyledSubmitButton = styled(StyledButton).attrs({ type: 'submit'
})` background: violet;
` export default function App() { return ( <> <StyledButton>Normal Button</StyledButton> <StyledSubmitButton>Submit Button</StyledSubmitButton> </> )
}

Demo 2: https://codesandbox.io/s/styled-component-attribute2-8pettq?file=/src/App.js

kiểu 3: attrs nhận vào function

import styled from 'styled-components' const StyledButton = styled.button.attrs(props => ({ type: props.type || 'button'
}))` border: none; padding: 10px; color: black; background: violet;
` export default function App() { return ( <> <StyledButton>Normal Button</StyledButton> <StyledButton type='submit'>Submit Button</StyledButton> </> )
}

Demo 3: https://codesandbox.io/s/styled-component-attribute3-hxs2nl?file=/src/App.js

11. Global style

Tạo ra global style áp dụng cho toàn dự án

import { createGlobalStyle } from 'styled-components' const GlobalStyle = createGlobalStyle` h1 { color: red; }
` export default function App() { return ( <> <GlobalStyle /> <h1>Hello World</h1> </> )
}

Demo: https://codesandbox.io/s/styled-component-global-style-8jyog9?file=/src/App.js

12. Styled Theme

Tạo ra theme config để dùng chung

import styled, { ThemeProvider } from 'styled-components' const styledTheme = { warning: { background: '#ffc107', text: '#000' }, danger: { background: '#dc3545', text: '#fff' }
} const StyledWarningButton = styled.button` color: ${(props) => props.theme.warning.text}; background: ${(props) => props.theme.warning.background};
` const StyledDangerButton = styled.button` color: ${(props) => props.theme.danger.text}; background: ${(props) => props.theme.danger.background};
` export default function App() { return ( <ThemeProvider theme={styledTheme}> <StyledWarningButton>Warning Button</StyledWarningButton> <StyledDangerButton>Danger Button</StyledDangerButton> </ThemeProvider> );
}

Demo: https://codesandbox.io/s/styled-component-config-theme-n3ey3k?file=/src/App.js:0-836