How to use styled-component

#HelloFrontend #HelloErmine #HelloWorld2021

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

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

1. import styled-components

2. สร้าง component ขึ้นมา

3. กำหนด property ไว้ภายในเครื่องหมาย ` ` (grave accent) และปิดท้ายแต่ละ property ด้วยเครื่องหมาย ; (semicolon)

4. เมื่อสร้าง styled-components เสร็จแล้ว จะเหมือนเราได้ tag ใหม่ที่มีชื่อตามที่เรากำหนดให้ const

5. เรียกใช้ styled-components ที่ต้องการ โดยใช้ tag ที่มีชื่อเดียวกับ const

รูปแบบ syntax ที่ใช้ในการเขียน styled-components

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)

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*/

ผลลัพธ์

CSS selector

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

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

Select by className

ใช้ . นำหน้าเพื่อบอกว่าเป็นส่วนของ class และใช้ props ที่มีชื่อว่า className ในการเรียกใช้

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 แสดงผลเป็นสีแดง*/

ผลลัพธ์

Select by children tag

ใช้ element name หรือ ชื่อ tag ในการเรียกใช้ได้เลย

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 ตามที่กำหนดไว้ในชุดคำสั่ง

ผลลัพธ์

:hover selector

ใช้ :hover เพื่อบอกว่าเป็นส่วนของ hover

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

hover