ใช้ styled-components ทำ React แบบ encapsulate style ใน template ที่ใส่ theme แยกได้

Published in

Sunday Tech

2 min readMar 24, 2018

เคยมั้ย? เวลาทำ Component กับ Style
ต้องทำอะไรแบบนี้ …
•คิดชื่อ classNameให้ปวดหัว เพื่อไม่ให้มันซ้ำกับใคร แถมพอมีอะไรเพิ่มทีหลังก็ต้องไปคิดอีกหลายตลบ ปวดหัวไม่เฉพาะคนทำรวมคนรีวิวอีก
•ไม่ว่าจะใช้ CSS3, SCSS ก็ต้องไปไล่ import ทีละไฟล์ ตามแต่ละ Components
•จะเอาไป reuse ทำอีก Component ก็ลำบากต้องไปคอยแกะ ต้องไปเติม ไปแก้ทีละ stylesheet หรือไม่ก็ต้องแยกไฟล์ไปเลยต่างหาก
•เวลามี Condition ก็ต้องเช็คแปลงเป็น className แล้วใส่ string interpolation ถ้ามีอันเดียวไม่เท่าไหร่ ถ้ามีหลายอันวุ่นวายแน่นอน
•จะสร้าง Componentใหม่ ทีนึงก็ต้องไปทำเหมือนเดิม ก็วนลูปเดิมๆกันไป

<Component className={`Cmp__custom ${hidden ? 'hide': '' }`} />

ถ้าลองทำเป็นแบบนี้จะชีวิตง่ายขึ้นกว่ามั้ย

<Component hidden />

มารู้จัก styled-components กันเถอะ

styled-components เค้าให้นิยามตัวเองว่าเป็น template literals ที่เขียน CSS ลงไปตรงๆได้พร้อมกับ component เลย

วิธีใช้ก็คือใน string interpolation เราก็เขียน style ลงไปได้ตรงๆเลย
ถ้ามี props ก็เขียนเป็น condition ได้ด้วย

const Button = styled.button`
  background: white;
  color: black;
  ${props => props.hidden && 
    css`
      display: none;
    `
  };
`;

Reusability ง่ายก็แค่จับ Component มา extend

const ExtendedButton = Button.extend`
  border-radius: 5px;
`;

มี Theme อยู่แล้วจะเอามาใช้ยังไง?

เราสามารถกำหนด defaultProps แล้วใส่ Theme ที่มีอยู่แล้วผ่านทาง ThemeProvider โดยที่ Theme จะส่งผลแค่สิ่งที่อยู่ภายใต้มันเท่านั้น

...
import styled, { ThemeProvider } from 'styled-components';const Button = styled.button`
  background: ${props => props.theme.background}
`;Button.defaultProps = {
  theme: {
    background: 'red',
  }
};const theme = {
  background: 'lightblue',
};const App = () => (
  <div>
    <Button>Normal</Button>
    <ThemeProvider theme={theme} >
      <Button>Theme Button</Button>
    </ThemeProvider>
  </div>
);

Use case บ้านๆ กับ styled-components

ฝ่าย Designer ส่ง Wildframeให้ทำ button ทางนั้นอยากได้
ขอบเหลี่ยม, ขอบมน, มีสองไซส์, สามารถใส่ Theme ต่างหาก
ถ้าทำวิธีแบบทั่วๆไป ต้องไปไล่วุ่นทำกับอะไรๆเหมือนเก่า

ตัวอย่างข้างล่างก็จะมี Practice ที่ช่วยสร้าง Base component กับ การใส่ Style ตรงๆ รวมถึงการนำเอาที่สร้างไป Extend ยังไงให้ได้ของใหม่ ร่วมถึงวิธีใส่ Theme เฉพาะอันที่เราอยากให้มันใช้ รวมถึงในตัว Code จะสามารถ Reusable และ Dry จบแค่ตัวมันเองไม่ต้องมีไฟล์หลายๆไฟล์เชื่อมโยงกันไปมาระหว่าง Javascript กับ CSS

ลองเล่นตัวอย่างใน CodeSandbox กัน

ส่วนตัวมองว่า ประโยชน์ของ styled-components ใช้ทำ UI ออกมาได้เร็วมาก ไม่วุ่นวายไปสร้าง ClassName กับ CSS เหมือนเก่า ช่วยลดงานบางอย่างที่จุกจิกที่เจอง่ายๆเลยเช่น การตั้งชื่อไม่สอดคล้องกับ Component มองว่ามันเป็นปัญหาระดับนึงเหมือนกันนะ

ไปแล้ว สวัสดีครับ…