Penggayaan dalam React-tutorial css-php.cn

Penggayaan dalam React

WBOY

Lepaskan： 2024-07-16 17:41:40

asal

694 orang telah melayarinya

Styling in React

pengenalan

Penggayaan ialah aspek penting dalam pembangunan web yang memastikan aplikasi anda menarik secara visual dan mesra pengguna. React menawarkan beberapa pendekatan untuk penggayaan komponen, daripada CSS tradisional dan Sass kepada penyelesaian CSS-dalam-JS moden seperti Komponen Bergaya. Minggu ini, kami akan menyelami kaedah ini dan mempelajari cara menerapkannya dengan berkesan dalam projek React anda.

Kepentingan Penggayaan dalam React

Penggayaan yang betul meningkatkan pengalaman pengguna, meningkatkan kebolehgunaan dan menjadikan aplikasi anda lebih menarik. Memahami teknik penggayaan yang berbeza membolehkan anda memilih pendekatan terbaik untuk keperluan projek khusus anda.

CSS tradisional

Menggunakan CSS dengan React:

Contoh Asas:

  import React from 'react';
  import './App.css';

  function App() {
      return (
          <div className="container">
              <h1 className="title">Hello, World!</h1>
          </div>
      );
  }

  export default App;

Salin selepas log masuk

App.css:

  .container {
      text-align: center;
      padding: 20px;
  }

  .title {
      color: blue;
      font-size: 2em;
  }

Salin selepas log masuk

Modul CSS:

Contoh:

  import React from 'react';
  import styles from './App.module.css';

  function App() {
      return (
          <div className={styles.container}>
              <h1 className={styles.title}>Hello, World!</h1>
          </div>
      );
  }

  export default App;

Salin selepas log masuk

App.module.css:

  .container {
      text-align: center;
      padding: 20px;
  }

  .title {
      color: blue;
      font-size: 2em;
  }

Salin selepas log masuk

Menggunakan Sass

Memasang Sass:

Arahan untuk Pasang:

  npm install node-sass

Salin selepas log masuk

Menggunakan Sass dalam React:

App.scss:

  $primary-color: blue;
  $padding: 20px;

  .container {
      text-align: center;
      padding: $padding;
  }

  .title {
      color: $primary-color;
      font-size: 2em;
  }

Salin selepas log masuk

Komponen Apl:

  import React from 'react';
  import './App.scss';

  function App() {
      return (
          <div className="container">
              <h1 className="title">Hello, World!</h1>
          </div>
      );
  }

  export default App;

Salin selepas log masuk

Penggayaan Bersarang dengan Sass:

Contoh:

  .container {
      text-align: center;
      padding: 20px;

      .title {
          color: blue;
          font-size: 2em;

          &:hover {
              color: darkblue;
          }
      }
  }

Salin selepas log masuk

Komponen Bergaya

Pengenalan kepada Komponen Bergaya:

Definisi: Pustaka untuk menggayakan komponen React menggunakan literal templat berteg.
Pemasangan:

  npm install styled-components

Salin selepas log masuk

Menggunakan Komponen Bergaya:

Contoh:

  import React from 'react';
  import styled from 'styled-components';

  const Container = styled.div`
      text-align: center;
      padding: 20px;
  `;

  const Title = styled.h1`
      color: blue;
      font-size: 2em;

      &:hover {
          color: darkblue;
      }
  `;

  function App() {
      return (
          <Container>
              <Title>Hello, World!</Title>
          </Container>
      );
  }

  export default App;

Salin selepas log masuk

Tema dengan Komponen Bergaya:

Mencipta Tema:

  import { ThemeProvider } from 'styled-components';

  const theme = {
      colors: {
          primary: 'blue',
          secondary: 'darkblue'
      },
      spacing: {
          padding: '20px'
      }
  };

  function App() {
      return (
          <ThemeProvider theme={theme}>
              <Container>
                  <Title>Hello, World!</Title>
              </Container>
          </ThemeProvider>
      );
  }

Salin selepas log masuk

Menggunakan Nilai Tema:

  import styled from 'styled-components';

  const Container = styled.div`
      text-align: center;
      padding: ${(props) => props.theme.spacing.padding};
  `;

  const Title = styled.h1`
      color: ${(props) => props.theme.colors.primary};
      font-size: 2em;

      &:hover {
          color: ${(props) => props.theme.colors.secondary};
      }
  `;

Salin selepas log masuk

Kesimpulan

Memilih pendekatan penggayaan yang betul dalam React bergantung pada keperluan projek dan pilihan peribadi anda. CSS dan Sass tradisional menawarkan kebiasaan dan kesederhanaan, manakala Komponen Bergaya menyediakan keupayaan penggayaan yang dinamik dan berskop. Menguasai teknik ini akan membantu anda membina antara muka pengguna yang cantik dan boleh diselenggara.

Sumber untuk Pembelajaran Lanjutan

Kursus Dalam Talian: Tapak web seperti Udemy, Pluralsight dan freeCodeCamp menawarkan kursus tentang teknik penggayaan React.
Buku: "React and React Native" oleh Adam Boduch dan "React Quickly" oleh Azat Mardan.
Dokumentasi dan Rujukan:
- Dokumentasi Komponen Bergaya
- Dokumentasi Sass
- Dokumentasi Modul CSS React
Komuniti: Sertai komuniti pembangun pada platform seperti Stack Overflow, Reddit dan GitHub untuk sokongan dan rangkaian.