Komponen Bergaya Bertindak balas

Apakah Komponen Bergaya?

Komponen Bergaya ialah perpustakaan popular untuk React yang membenarkan pembangun menulis CSS terus dalam kod JavaScript mereka. Pustaka ini memanfaatkan literal templat berteg untuk menggayakan komponen anda. Ia menggalakkan penggunaan gaya peringkat komponen, membantu mengasingkan kebimbangan penggayaan dan struktur elemen serta menjadikan kod keseluruhan lebih boleh diselenggara.

Faedah Menggunakan Komponen Bergaya

1. Penggayaan Dinamik: Komponen Bergaya membenarkan anda menggunakan JavaScript untuk menetapkan gaya secara dinamik berdasarkan prop, keadaan atau mana-mana pembolehubah lain.

2. Organisasi yang Lebih Baik: Memastikan gaya rapat dengan komponen yang mempengaruhinya menjadikan kod anda lebih modular dan lebih mudah untuk diurus.

3. Tiada Pepijat Nama Kelas: Memandangkan gaya merangkumi komponen, anda tidak perlu risau tentang perlanggaran nama kelas atau isu kekhususan yang biasa dengan CSS tradisional.

4. Sokongan Tema: Komponen Bergaya menawarkan sokongan terbina dalam untuk tema, menjadikannya mudah untuk menggunakan gaya yang konsisten merentas aplikasi anda.

Memasang Komponen Bergaya

Untuk mula menggunakan Komponen Bergaya, anda perlu memasangnya melalui npm atau benang:

npm install styled-components

or

yarn add styled-components

Penggunaan Asas

Berikut ialah contoh asas untuk menggambarkan cara Komponen Bergaya berfungsi:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return <StyledButton> Login </StyledButton>;
}

Menyesuaikan Berdasarkan Props

Komponen yang digayakan berfungsi, jadi kami boleh menggayakan elemen secara dinamik dengan mudah.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    <div>
      <StyledButton bg="black">Button A</StyledButton>
      <StyledButton bg="blue">Button B</StyledButton>
    </div>
  )
}

Tema

Komponen Bergaya juga menyokong tema, membolehkan anda mentakrifkan satu set gaya (seperti warna, fon, dll.) dan menerapkannya secara konsisten sepanjang aplikasi anda.

Pertama, anda tentukan tema anda:

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

Kemudian, bungkus aplikasi anda dengan ThemeProvider dan lulus tema anda:

const App = () => (
  <ThemeProvider theme={theme}>
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  </ThemeProvider>
);

Akhir sekali, akses sifat tema dalam komponen gaya anda:

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

Kesimpulan

Komponen Bergaya ialah alat yang berkuasa untuk pembangun React yang ingin meningkatkan kebolehselenggaraan dan kebolehskalaan aplikasi mereka. Dengan merangkum gaya dalam komponen dan memanfaatkan kuasa penuh JavaScript, Komponen Bergaya menyediakan pendekatan moden dan cekap untuk menggayakan aplikasi web. Sama ada anda sedang mengusahakan projek kecil atau aplikasi berskala besar, Komponen Bergaya boleh membantu anda memastikan gaya anda teratur dan kod anda bersih.

Atas ialah kandungan terperinci Komponen Bergaya Bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!