CSS Academy · Pelajaran

Emotion: css() dan styled()

Gunakan gaya dinamik dengan pembantu css() dan kilang komponen styled() milik Emotion.

Pelajaran 2 daripada 413 langkah

Emotion: css() dan styled() ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah Emotion?

Emotion ialah pustaka CSS-dalam-JS dengan antara muka yang fleksibel. Ia menawarkan dua pendekatan utama: fungsi css() (tidak bergantung pada rangka kerja) dan antara muka styled() (serupa dengan styled-components). Kedua-duanya menjana nama kelas berskop secara automatik.

Memasang Emotion

Terdapat dua pakej bergantung pada keperluan anda:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

Fungsi css()

Fungsi css() menjana nama kelas daripada objek CSS atau literal templat:

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

function Button({ children }) {
  return <button className={buttonStyle}>{children}</button>;
}

Objek CSS dengan css()

Sintaks objek ialah alternatif kepada literal templat — berguna untuk pelengkapan automatik TypeScript:

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

Antara Muka styled()

styled Emotion berfungsi sama seperti styled-components untuk memudahkan pemindahan antara kedua-duanya:

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

Sifat css (Penggayaan Sebaris)

Sifat css Emotion membolehkan anda menulis gaya terus pada elemen JSX — tanpa memerlukan komponen tambahan. Pakej @emotion/react serta pemalam Babel/SWC diperlukan:

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Gaya Dinamik dengan Emotion

Kedua-dua antara muka menerima fungsi yang menerima sifat untuk nilai dinamik:

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

Gaya Global

Gunakan Global daripada @emotion/react untuk CSS global:

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion berbanding styled-components

Emotion dan styled-components mempunyai antara muka yang hampir serupa. Emotion menunjukkan prestasi yang sedikit lebih baik dalam penanda aras, saiz himpunan yang lebih kecil, serta sifat css sebagai antara muka tambahan. Kedua-duanya ialah pilihan yang terbukti untuk aplikasi React dalam persekitaran produksi.

Bingkai Utama dalam Emotion

Tentukan animasi dengan pembantu keyframes:

import { keyframes, css } from '@emotion/react';

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

Pemaparan Sisi Pelayan

Emotion menyokong SSR melalui extractCriticalToChunks() untuk mengumpulkan dan menyuntik CSS kritikal semasa pemaparan di pelayan dalam rangka kerja React seperti Next.js.

Semakan Ringkas

Apakah perbezaan utama antara fungsi css() Emotion dengan antara muka styled()nya?

Jawab dalam pelajaran interaktif

Rumusan

Emotion menawarkan dua antara muka penggayaan utama: css() menjana nama kelas (digunakan melalui className), manakala styled() mencipta komponen React bergaya. Sifat css membolehkan penulisan gaya seperti gaya sebaris dengan kuasa CSS sepenuhnya. Emotion sangat serasi dengan styled-components dari segi antara muka dan selalunya lebih pantas. Kedua-dua pendekatan mengehadkan skop gaya secara automatik menggunakan nama kelas yang dijana.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Emotion: css() dan styled()” percuma?

Ya — teks penuh “Emotion: css() dan styled()” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Emotion: css() dan styled()”?

Gunakan gaya dinamik dengan pembantu css() dan kilang komponen styled() milik Emotion. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Emotion: css() dan styled()” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

styled-components: Literal Templat Bertanda
Emotion: css() dan styled()
Modul CSS: Gaya Berskop
Vanilla Extract: CSS-dalam-JS Tanpa Masa Jalan

← Kembali ke CSS Academy