การใช้ Props กับ Styled Components ใน React

จากบทเรียนที่ผ่านมา เราได้เรียนรู้ว่าคอมโพเนนต์ ที่ถูกสไตล์โดยใช้ไลบรารี Styled Components สามารถใช้ได้เหมือน React คอมโพเนนต์ทั่วไป ในบทเรียนนี้ เราจะเห็นว่า props ก็จะทำงานในลักษณะเดียวกันที่นี่

สมมติว่าเรามี React คอมโพเนนต์ Block และเราได้สร้างคอมโพเนนต์ที่ถูกสไตล์ โดยใช้ Styled Components ขึ้นภายใน คือ Input และ Container:

Block.jsconst Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 150px;
`;

const Input = styled.input`
  margin: 5px;
  font-size: 18px;
`;

มาจัดวางคอมโพเนนต์ Input สามตัวไว้ใน Container:

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input />
      <Input />
    </Container>
  );
}

การใช้ props ทำให้เราสามารถกำหนด แอตทริบิวต์ต่างๆ ในคอมโพเนนต์ได้ ลองมา กำหนดแอตทริบิวต์ placeholder และ type ให้กับอินพุตตัวที่สอง ด้วยค่า name และ text ตามลำดับ และสำหรับอินพุตตัวที่สาม ให้กำหนดค่า password ให้กับแอตทริบิวต์ type:

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input placeholder="name" type="text" />
      <Input type="password" />
    </Container>
  );
}