Untuk menyesuaikan palet UI Material saya, saya telah melakukan sesuatu seperti ini untuk menyiapkan tema saya:

import blue from '@material-ui/core/colors/blue';

const theme = createMuiTheme({
  palette: {
    primary: blue,
  },
});

blue berisi banyak corak, seperti yang ditunjukkan di bawah ini:

enter image description here

Sekarang bagaimana cara mengakses semua nuansa palet primary di dalam komponen saya? Mengakses semua nuansa palette.grey mudah seperti yang ditunjukkan di bawah ini:

enter image description here

Tapi sepertinya saya tidak bisa mengakses nuansa primary selain main, dark, light, dan contrastColor, seperti yang ditunjukkan di bawah ini:

enter image description here

Bagaimana cara mengakses semua nuansa (mis. theme.palette.primary.A100) dari komponen saya?

8
Johnny Oshika 9 April 2021, 02:25

3 jawaban

Jawaban Terbaik

Sekarang bagaimana cara mengakses semua nuansa palet utama di dalam komponen saya?

Saya pikir ada kesalahpahaman di sini. Anda sudah dapat mengakses varian warna tema (dark, light, contrastText), tetapi jika yang Anda maksud adalah semua corak dari objek warna (blue[100], blue[200],...). Maka tidak, createMuiTheme() tidak menghasilkan itu untuk Anda secara otomatis.

Dari dokumen Material-UI:

Hanya nuansa utama yang perlu disediakan (kecuali jika Anda ingin lebih lanjut sesuaikan light, dark atau contrastText), karena warna lain akan dihitung dengan createMuiTheme(), seperti yang dijelaskan dalam Tema bagian kustomisasi.

Ketika Anda hanya memberikan 1 warna ke properti main seperti di bawah ini:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#607d8b"
    }
  }
});

Material-UI akan menghitung light, dark varian warna tersebut bersama dengan contrastText untuk warna teks. Anda dapat mencatat theme.palette.main untuk mengonfirmasi hal ini:

const useStyles = makeStyles((theme) => {
  console.log(theme.palette.main);
  return {};
});
{
  main: "#607d8b",
  light: "rgb(127, 151, 162)",
  dark: "rgb(67, 87, 97)",
  contrastText: "#fff",
}

Namun, jika Anda memutuskan untuk meneruskan objek warna:

import { createMuiTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';

const theme = createMuiTheme({
  palette: {
    primary: blue,
  },
});

Kemudian Material-UI akan menemukan bayangan utama dari objek tersebut. Standarnya adalah blue[500], dan hitung dark, light dan contrastText berdasarkan warna main seperti biasa. Hasil akhirnya akan terlihat seperti ini:

const useStyles = makeStyles((theme) => {
  console.log(theme.palette.main);
  return {};
});
{
  50: "#eceff1",
  100: "#cfd8dc",
  200: "#b0bec5",
  300: "#90a4ae",
  400: "#78909c",
  500: "#607d8b", // createPalette() uses this color as main
  600: "#546e7a",
  700: "#455a64",
  800: "#37474f",
  900: "#263238",
  A100: "#cfd8dc",
  A200: "#b0bec5",
  A400: "#78909c",
  A700: "#455a64",
  main: "#607d8b", // added from createPalette()
  light: "#90a4ae", // added from createPalette()
  dark: "#455a64", // added from createPalette()
  contrastText: "#fff", // added from createPalette()
}

Penggunaan TypeScript

Seperti yang ditunjukkan oleh ini, jika Anda menggunakan TypeScript, Anda dapat menyadari bahwa itu tidak memberi Anda informasi nuansa dalam tema PaletteColor.

const useStyles = makeStyles((theme) => {
  const shade = theme.palette.main[500]; // shade is any instead of string
  return {};
});

Solusi seperti yang disarankan pengelola adalah menggunakan modul augmentation untuk memperluas definisi PaletteColor:

import { ColorPartial } from "@material-ui/core/styles/createPalette";

declare module "@material-ui/core/styles/createPalette" {
  interface PaletteColor extends ColorPartial {}
}

Jika Anda menggunakan ini saran aturan linter untuk menghindari pengimporan modul pribadi (apa pun yang lebih dalam dari 2 level impor). Anda dapat membuat ColorPartial sendiri dengan mudah seperti ini:

import { Color } from "@material-ui/core";

type ColorPartial = Partial<Color>;

declare module "@material-ui/core/styles/createPalette" {
  interface PaletteColor extends ColorPartial {}
}

Sekarang TypeScript mengetahui semua kemungkinan nuansa di PaletteColor Anda:

const useStyles = makeStyles((theme) => {
  const shade = theme.palette.main[500]; // shade is string
  return {};
});

Demo Langsung

Edit 67013112/material-ui-how-to-access-all-palette-shades-inside-component

3
NearHuscarl 10 April 2021, 01:23

Jawaban @ NearHuscarl adalah yang benar, tetapi tidak akan berfungsi dengan baik dengan tipe TypeScript. Untuk mengatasi masalah ini, saya malah membuat palet baru dengan nama baru (mis. primaryShades), dan saya menggunakannya di dalam komponen saya.

Tema:

const theme = createMuiTheme({
  palette: {
    primary: blue,
    primaryShades: blue,
  },
});

Inilah augmentasi modul untuk tema (sehingga TypeScript mengenali primaryShades):

import { Color } from '@material-ui/core';

declare module '@material-ui/core/styles/createPalette' {
  interface Palette {
    primaryShades: Color;
  }
  interface PaletteOptions {
    primaryShades: PaletteColorOptions;
  }
}

Komponen:

Sekarang saya dapat menggunakan semua nuansa di dalam komponen saya seperti ini:

const useStyles = makeStyles(theme => ({
  widget: {
    color: theme.palette.primaryShades[700],
  },
}));

...dan saya mendapatkan intellisense penuh di VSCode:

enter image description here

0
Johnny Oshika 9 April 2021, 19:12

Menurut dokumentasi sistem warna UI Material, ini secara otomatis menghitung beberapa nilai, seperti dark, light, main. Namun, untuk lebih banyak varian, dikatakan menggunakan objek warna seperti @material-ui/core/colors/blue. mungkin blue yang Anda gunakan dalam kode contoh pertama Anda.

Objek warna memiliki struktur seperti di bawah ini. tautan github

const blue = {
  50: '#e3f2fd',
  100: '#bbdefb',
  200: '#90caf9',
  300: '#64b5f6',
  400: '#42a5f5',
  500: '#2196f3',
  600: '#1e88e5',
  700: '#1976d2',
  800: '#1565c0',
  900: '#0d47a1',
  A100: '#82b1ff',
  A200: '#448aff',
  A400: '#2979ff',
  A700: '#2962ff',
};

export default blue;

Jadi jika Anda ingin menggunakan lebih banyak varian untuk warna yang tidak disajikan sebagai objek warna, Anda harus membuat variasi warna sendiri.

0
Hyeonseo Kim 9 April 2021, 00:06