---
description: '#HelloFrontend #HelloErmine #HelloWorld2021'
---

# How to use styled-component

## **พื้นฐานการใช้งาน** styled-components

### การสร้างตัวเเปร styled-components

1. import styled-components
2. สร้าง component ขึ้นมา&#x20;
3. กำหนด property ไว้ภายในเครื่องหมาย \` \` (grave accent) และปิดท้ายแต่ละ property ด้วยเครื่องหมาย  ; (semicolon)
4. เมื่อสร้าง styled-components เสร็จแล้ว จะเหมือนเราได้ tag ใหม่ที่มีชื่อตามที่เรากำหนดให้ const
5. เรียกใช้ styled-components ที่ต้องการ โดยใช้ tag ที่มีชื่อเดียวกับ const

![รูปแบบ syntax ที่ใช้ในการเขียน styled-components](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-Menynprpg7j1J291o2d%2F-Menz-ivpPEemhbi2vHN%2Fimage.png?alt=media\&token=c29faa6f-7e04-4c0f-8cd3-241e012aa901)

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

const TestStyled = styled.div` 
    background-color: grey;
`
//TestStyled คือชื่อของ const (ตั้งว่าอะไรก็ได้ แล้วแต่เรา)
//styled ในบรรทัดที่ 3 เป็น styled ตัวเดียวกับที่เรา import มา ในบรรทัดที่ 1
//.div ในบรรทัดที่ 3 เป็นการบอกว่าให้ TestStyled ทำงานเหมือนกับเป็น tag div ตัวหนึ่งในภาษา HTML 
//ใส่ property ของ style ที่ต้องการกำหนดให้กับ component ไว้ในเครื่องหมาย ` `

function App() {
  return (
    <div>
      <TestStyled></TestStyled>
    </div>
  );
}
//เรียกใช้ styled-components ที่ต้องการโดยใช้ tag ที่มีชื่อเดียวกับ const ตัวที่เราต้องการ
```

## การใช้งาน styled-components ในรูปเเบบต่าง ๆ

### Inheritance

Inheritance หรือ การสืบทอด คือ การสืบทอดลักษณะจาก component พ่อ (Parent) ไปยัง component ลูก (Child)

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

const Parent = styled.div`
  width: 150px;
  height: 100px;
  background-color: lightblue;
  margin-top: 50px;
  margin-left: 50px;
`
const Child = styled(Parent)`   
  border: 10px solid grey;
`
//Child component รับค่า styled มาจาก Parent component 
//styled ทั้งหมดที่อยู่ใน Parent จะถูกสืบทอดมายัง Child ด้วย

function App() {
  return (
    <div>
      <Child>
         Hello World
      </Child>
    </div>
  );
}
//เรียกใช้แค่ Child component
/*ผลลัพธ์ที่ได้จะแสดงผล style ทั้งของ Child ก็คือ border 
และแสดงผล style ต่าง ๆ ของ Parent ด้วย เช่น background-color*/
```

![ผลลัพธ์](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-Menynprpg7j1J291o2d%2F-Menz5Oauudk5pIDn2jf%2Fimage.png?alt=media\&token=27079b5e-09fc-444d-999a-cc51ec55af08)

### **CSS selector**

มีหลักการเหมือนการใช้ CSS selector กับ HTML เลย เช่น การใช้ CSS selector ชนิดที่เป็น class selector จะมีการใช้เครื่องหมาย . นำหน้าส่วนที่ต้องการระบุว่าเป็น class ที่ภายในมีชุดคำสั่ง CSS อยู่ และในการเรียกใช้ชุดคำสั่งนั้น ใน 1 tag จะเรียกใช้กี่ชุดคำสั่งก็ได้ &#x20;

ในการใช้ CSS Selector กับ styled-components จะต้องเขียน CSS Selector อยู่ใน styled-components และมักจะใช้เครื่องหมาย & นำหน้าตัวที่ใช้บ่งบอกชนิดของ CSS selector อยู่ด้วย แต่จะไม่มีก็ได้  &#x20;

{% tabs %}
{% tab title="Select by className" %}
ใช้ `.` นำหน้าเพื่อบอกว่าเป็นส่วนของ class และใช้ props ที่มีชื่อว่า `className` ในการเรียกใช้

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

const MyDiv = styled.div`
  height: 500px;
  width: 500px;
  margin: 100px;

& .test{
  color: red;
}
`
//.test คือ ชุดคำสั่ง CSS ที่มีชนิด class ที่มีชื่อชุดคำสั่งว่า test

function App() {
  return (
    <div>
      <MyDiv>
          <p className='test'>I love you</p>
          I miss you
      </MyDiv>
    </div>
  );
}
/*tag p มีการกำหนด props ที่ชื่อว่า className 
เพื่อเรียกใช้ชุดคำสั่ง CSS ชนิด class ที่ชื่อว่า test มาใช้ 
ซึ่งในชุดคำสั่ง .test มีการกำหนดสีตัวอักษรเป็นสีแดงเอาไว้ 
ทำให้ I love you แสดงผลเป็นสีแดง*/
```

![ผลลัพธ์](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-MenzO7eASo3LScSyRk9%2F-MenzW402rHkSyX8vXzY%2Fimage.png?alt=media\&token=6be0ee28-9fa0-4522-939d-d79a560b93fe)
{% endtab %}

{% tab title="Select by children tag" %}
ใช้ `element name` หรือ ชื่อ tag ในการเรียกใช้ได้เลย

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

const MyDiv = styled.div`
  height: 500px;
  width: 500px;
  margin: 100px;

& p{
  color: red;
}

`
//กำหนดชุดคำสั่งเอาไว้ โดยจะนำไปใช้กับ tag p ที่อยู่ใน MyDiv


function App() {
  return (
    <div>
      <MyDiv>
          <p>I love you</p>
          I miss you
      </MyDiv>
    </div>
  );
}
//tag p ที่อยู่ใน MyDiv จะแสดงผล styled ตามที่กำหนดไว้ในชุดคำสั่ง
```

![ผลลัพธ์](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-MenzO7eASo3LScSyRk9%2F-MenzaqSXeYiY7JQAYF_%2Fimage.png?alt=media\&token=665d662e-20b3-4def-87ec-0eca55bfa01d)


{% endtab %}

{% tab title=":hover selector" %}
ใช้ `:hover` เพื่อบอกว่าเป็นส่วนของ hover

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

const MyDiv = styled.div`
  height: 200px;
  width: 500px;
  margin: 100px;
  background-color: green;
  color: white;

:hover{
  background-color: red;
  cursor: pointer;
}
`
//style ที่อยู่ใน :hover จะทำงานเมื่อเราเอาเมาส์ไปชี้ที่ component นั้น

function App() {
  return (
    <div>
      <MyDiv>
           I miss you
      </MyDiv>
    </div>
  );
}
```

![ไม่ hover](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-MenzfQQOWmqYFLi-k1R%2F-Menzi9b343gymt8LYuf%2Fimage.png?alt=media\&token=0701a605-6fe4-4bc4-b2fb-2b46f3cb087f)

![hover](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-MenzfQQOWmqYFLi-k1R%2F-MenznlXr10AxQrobnZ0%2Fimage.png?alt=media\&token=0a027d9f-0722-4005-847f-dd731550c2dd)
{% endtab %}
{% endtabs %}
