> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_advance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_advance/react/styled-component.md).

# styled component

{% embed url="<https://styled-components.com/>" %}

類似於把 style 抽出放在一個 higher order component的概念，但是寫在同一個檔案。

```javascript
import styled from 'styled-components';

const StyledTable = styled.table`
  width: calc(100% - 64px);
  margin: 32px;
  border: 1px solid black;
  background-color: gray;
  thead {
    font-weight: bold;
  }
`

const Table = () => {
  <StyledTable>
    <thead>
      <tr>
  .....
  </StyledTable>
}
```