遷移至新主題
本指南將引導您了解最近 Joy UI 預設主題的升級，以及如何更新至該主題。
隨著 Joy UI v5.0.0-beta.0 的推出，其預設主題經歷了一些重大的重組和潤飾。進行了一些變更，包括重新命名、移除和新增 tokens。本指南將逐步說明每一項變更，並提供順利遷移過程的指示。
色彩 & 排版
紫色調色盤已移除
紫色調色盤已移除，因為我們更新了主要色彩。如果您想繼續使用它，請將以下程式碼片段複製到您的專案中
const purple = {
50: '#FDF7FF',
100: '#F4EAFF',
200: '#E1CBFF',
300: '#C69EFF',
400: '#A374F9',
500: '#814DDE',
600: '#5F35AE',
700: '#452382',
800: '#301761',
900: '#1D0A42',
};
資訊調色盤已移除
資訊調色盤已移除，以簡化色彩組合。我們發現，在大多數情況下，中性調色盤用於與資訊相關的組件和使用情境。此外，我們注意到 info 和 neutral 之間存在高度重疊，這進一步促成了這項變更。
- <Chip color="info" variant="soft">
+ <Chip color="neutral" variant="soft">
如果您想繼續使用它，請將調色盤直接新增至主題物件檔案
import { extendTheme } from '@mui/joy/styles';
const info = {
50: '#FDF7FF',
100: '#F4EAFF',
200: '#E1CBFF',
300: '#C69EFF',
400: '#A374F9',
500: '#814DDE',
600: '#5F35AE',
700: '#452382',
800: '#301761',
900: '#1D0A42',
};
const theme = extendTheme({
colorSchemes: {
light: {
palette: {
info: {
...info,
plainColor: `var(--joy-palette-info-600)`,
plainHoverBg: `var(--joy-palette-info-100)`,
plainActiveBg: `var(--joy-palette-info-200)`,
plainDisabledColor: `var(--joy-palette-info-200)`,
outlinedColor: `var(--joy-palette-info-500)`,
outlinedBorder: `var(--joy-palette-info-200)`,
outlinedHoverBg: `var(--joy-palette-info-100)`,
outlinedHoverBorder: `var(--joy-palette-info-300)`,
outlinedActiveBg: `var(--joy-palette-info-200)`,
outlinedDisabledColor: `var(--joy-palette-info-100)`,
outlinedDisabledBorder: `var(--joy-palette-info-100)`,
softColor: `var(--joy-palette-info-600)`,
softBg: `var(--joy-palette-info-100)`,
softHoverBg: `var(--joy-palette-info-200)`,
softActiveBg: `var(--joy-palette-info-300)`,
softDisabledColor: `var(--joy-palette-info-300)`,
softDisabledBg: `var(--joy-paletteinfo}-50)`,
solidColor: '#fff',
solidBg: `var(--joy-palette-info-500)`,
solidHoverBg: `var(--joy-palette-info-600)`,
solidActiveBg: `var(--joy-palette-info-700)`,
solidDisabledColor: `#fff`,
solidDisabledBg: `var(--joy-palette-info-200)`,
},
},
},
dark: {
palette: {
info: {
...info,
plainColor: `var(--joy-palette-info-300)`,
plainHoverBg: `var(--joy-palette-info-800)`,
plainActiveBg: `var(--joy-palette-info-700)`,
plainDisabledColor: `var(--joy-palette-info-800)`,
outlinedColor: `var(--joy-palette-info-200)`,
outlinedBorder: `var(--joy-palette-info-700)`,
outlinedHoverBg: `var(--joy-palette-info-800)`,
outlinedHoverBorder: `var(--joy-palette-info-600)`,
outlinedActiveBg: `var(--joy-palette-info-900)`,
outlinedDisabledColor: `var(--joy-palette-info-800)`,
outlinedDisabledBorder: `var(--joy-palette-info-800)`,
softColor: `var(--joy-palette-info-200)`,
softBg: `var(--joy-palette-info-900)`,
softHoverBg: `var(--joy-palette-info-800)`,
softActiveBg: `var(--joy-palette-info-700)`,
softDisabledColor: `var(--joy-palette-info-800)`,
softDisabledBg: `var(--joy-palette-info-900)`,
solidColor: `#fff`,
solidBg: `var(--joy-palette-info-600)`,
solidHoverBg: `var(--joy-palette-info-700)`,
solidActiveBg: `var(--joy-palette-info-800)`,
solidDisabledColor: `var(--joy-palette-info-700)`,
solidDisabledBg: `var(--joy-palette-info-900)`,
},
},
},
},
});
然後將 theme 提供給 CssVarsProvider
import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
const theme = extendTheme({ … });
function App() {
return <CssVarsProvider theme={theme}>…</CssVarsProvider>;
}
TypeScript
若您使用 TypeScript，請透過模組擴充將 info 調色盤新增至主題的調色盤類型
// You can put this to any file that's included in your tsconfig
import type { PaletteRange } from '@mui/joy/styles';
declare module '@mui/joy/styles' {
interface ColorPalettePropOverrides {
// apply to all Joy UI components that support `color` prop
info: true;
}
interface Palette {
// this will make the node `info` configurable in `extendTheme`
// and add `info` to the theme's palette.
info: PaletteRange;
}
}
其他調色盤
所有調色盤的每個色彩都經過調整，以獲得更好的對比度、鮮明度和風格。以下是變更前後的比較
- #F4FAFF#EDF5FD
- #DDF1FF#E3EFFB
- #ADDBFF#C7DFF7
- #6FB6FF#97C3F0
- #3990FF#4393E4
- #096BDE#0B6BCB
- #054DA7#185EA5
- #02367D#12467B
- #072859#0A2744
- #00153C#051423
primary (50 - 900)
- #F7F7F8#FBFCFE
- #EBEBEF#F0F4F8
- #D8D8DF#DDE7EE
- #B9B9C6#CDD7E1
- #8F8FA3#9FA6AD
- #73738C#636B74
- #5A5A72#555E68
- #434356#32383E
- #25252D#171A1C
- #131318#0B0D0E
neutral (50 - 900)
- #FFF8F6#FEF6F6
- #FFE9E8#FCE4E4
- #FFC7C5#F7C5C5
- #FF9192#F09898
- #FA5255#E47474
- #D3232F#C41C1C
- #A10E25#A51818
- #77061B#7D1212
- #580013#430A0A
- #39000D#240505
danger (50 - 900)
- #F3FEF5#F6FEF6
- #D7F5DD#E3FBE3
- #77EC95#C7F7C7
- #4CC76E#A1E8A1
- #2CA24D#51BC51
- #1A7D36#1F7A1F
- #0F5D26#136C13
- #034318#0A470A
- #002F0F#042F04
- #001D09#021D02
success (50 - 900)
- #FFF8C5#FEFAF6
- #FAE17D#FDF0E1
- #EAC54F#FCE1C2
- #D4A72C#F3C896
- #BF8700#EA9A3E
- #9A6700#9A5B13
- #7D4E00#72430D
- #633C01#492B08
- #4D2D00#2E1B05
- #3B2300#1D1002
warning (50 - 900)
- #FFF#FCFCFD
- #09090D#09090B
common (white & black)
保留舊色彩
若要繼續使用舊色彩，請將它們新增至您的主題
主要
const primary = {
50: '#F4FAFF',
100: '#DDF1FF',
200: '#ADDBFF',
300: '#6FB6FF',
400: '#3990FF',
500: '#096BDE',
600: '#054DA7',
700: '#02367D',
800: '#072859',
900: '#00153C',
};
extendTheme({
colorSchemes: {
light: {
palette: {
primary: {
...primary,
plainColor: `var(--joy-palette-primary-600)`,
plainHoverBg: `var(--joy-palette-primary-100)`,
plainActiveBg: `var(--joy-palette-primary-200)`,
plainDisabledColor: `var(--joy-palette-primary-200)`,
outlinedColor: `var(--joy-palette-primary-500)`,
outlinedBorder: `var(--joy-palette-primary-200)`,
outlinedHoverBg: `var(--joy-palette-primary-100)`,
outlinedHoverBorder: `var(--joy-palette-primary-300)`,
outlinedActiveBg: `var(--joy-palette-primary-200)`,
outlinedDisabledColor: `var(--joy-palette-primary-100)`,
outlinedDisabledBorder: `var(--joy-palette-primary-100)`,
softColor: `var(--joy-palette-primary-600)`,
softBg: `var(--joy-palette-primary-100)`,
softHoverBg: `var(--joy-palette-primary-200)`,
softActiveBg: `var(--joy-palette-primary-300)`,
softDisabledColor: `var(--joy-palette-primary-300)`,
softDisabledBg: `var(--joy-palette-primary}-)50`,
solidColor: '#fff',
solidBg: `var(--joy-palette-primary-500)`,
solidHoverBg: `var(--joy-palette-primary-600)`,
solidActiveBg: `var(--joy-palette-primary-700)`,
solidDisabledColor: `#fff`,
solidDisabledBg: `var(--joy-palette-primary-200)`,
},
},
},
dark: {
palette: {
primary: {
...primary,
plainColor: `var(--joy-palette-primary-300)`,
plainHoverBg: `var(--joy-palette-primary-800)`,
plainActiveBg: `var(--joy-palette-primary-700)`,
plainDisabledColor: `var(--joy-palette-primary-800)`,
outlinedColor: `var(--joy-palette-primary-200)`,
outlinedBorder: `var(--joy-palette-primary-700)`,
outlinedHoverBg: `var(--joy-palette-primary-800)`,
outlinedHoverBorder: `var(--joy-palette-primary-600)`,
outlinedActiveBg: `var(--joy-palette-primary-900)`,
outlinedDisabledColor: `var(--joy-palette-primary-800)`,
outlinedDisabledBorder: `var(--joy-palette-primary-800)`,
softColor: `var(--joy-palette-primary-200)`,
softBg: `var(--joy-palette-primary-900)`,
softHoverBg: `var(--joy-palette-primary-800)`,
softActiveBg: `var(--joy-palette-primary-700)`,
softDisabledColor: `var(--joy-palette-primary-800)`,
softDisabledBg: `var(--joy-palette-primary-900)`,
solidColor: `#fff`,
solidBg: `var(--joy-palette-primary-600)`,
solidHoverBg: `var(--joy-palette-primary-700)`,
solidActiveBg: `var(--joy-palette-primary-800)`,
solidDisabledColor: `var(--joy-palette-primary-700)`,
solidDisabledBg: `var(--joy-palette-primary-900)`,
},
},
},
},
});
中性
const neutral = {
50: '#F7F7F8',
100: '#EBEBEF',
200: '#D8D8DF',
300: '#B9B9C6',
400: '#8F8FA3',
500: '#73738C',
600: '#5A5A72',
700: '#434356',
800: '#25252D',
900: '#131318',
};
extendTheme({
colorSchemes: {
light: {
palette: {
neutral: {
...neutral,
plainColor: `var(--joy-palette-neutral-800)`,
plainHoverColor: `var(--joy-palette-neutral-900)`,
plainHoverBg: `var(--joy-palette-neutral-100)`,
plainActiveBg: `var(--joy-palette-neutral-200)`,
plainDisabledColor: `var(--joy-palette-neutral-300)`,
outlinedColor: `var(--joy-palette-neutral-800)`,
outlinedBorder: `var(--joy-palette-neutral-200)`,
outlinedHoverColor: `var(--joy-palette-neutral-900)`,
outlinedHoverBg: `var(--joy-palette-neutral-100)`,
outlinedHoverBorder: `var(--joy-palette-neutral-300)`,
outlinedActiveBg: `var(--joy-palette-neutral-200)`,
outlinedDisabledColor: `var(--joy-palette-neutral-300)`,
outlinedDisabledBorder: `var(--joy-palette-neutral-100)`,
softColor: `var(--joy-palette-neutral-800)`,
softBg: `var(--joy-palette-neutral-100)`,
softHoverColor: `var(--joy-palette-neutral-900)`,
softHoverBg: `var(--joy-palette-neutral-200)`,
softActiveBg: `var(--joy-palette-neutral-300)`,
softDisabledColor: `var(--joy-palette-neutral-300)`,
softDisabledBg: `var(--joy-palette-neutral-50)`,
solidColor: `var(--joy-palette-common-white)`,
solidBg: `var(--joy-palette-neutral-600)`,
solidHoverBg: `var(--joy-palette-neutral-700)`,
solidActiveBg: `var(--joy-palette-neutral-800)`,
solidDisabledColor: `var(--joy-palette-neutral-300)`,
solidDisabledBg: `var(--joy-palette-neutral-50)`,
},
common: {
white: '#FFF',
black: '#09090D',
},
text: {
secondary: 'var(--joy-palette-neutral-600)',
tertiary: 'var(--joy-palette-neutral-500)',
},
background: {
body: 'var(--joy-palette-common-white)',
tooltip: 'var(--joy-palette-neutral-800)',
backdrop: 'rgba(255 255 255 / 0.5)',
},
},
},
dark: {
palette: {
neutral: {
...neutral,
plainColor: `var(--joy-palette-neutral-200)`,
plainHoverColor: `var(--joy-palette-neutral-50)`,
plainHoverBg: `var(--joy-palette-neutral-800)`,
plainActiveBg: `var(--joy-palette-neutral-700)`,
plainDisabledColor: `var(--joy-palette-neutral-700)`,
outlinedColor: `var(--joy-palette-neutral-200)`,
outlinedBorder: `var(--joy-palette-neutral-800)`,
outlinedHoverColor: `var(--joy-palette-neutral-50)`,
outlinedHoverBg: `var(--joy-palette-neutral-800)`,
outlinedHoverBorder: `var(--joy-palette-neutral-700)`,
outlinedActiveBg: `var(--joy-palette-neutral-800)`,
outlinedDisabledColor: `var(--joy-palette-neutral-800)`,
outlinedDisabledBorder: `var(--joy-palette-neutral-800)`,
softColor: `var(--joy-palette-neutral-200)`,
softBg: `var(--joy-palette-neutral-800)`,
softHoverColor: `var(--joy-palette-neutral-50)`,
softHoverBg: `var(--joy-palette-neutral-700)`,
softActiveBg: `var(--joy-palette-neutral-600)`,
softDisabledColor: `var(--joy-palette-neutral-700)`,
softDisabledBg: `var(--joy-palette-neutral-900)`,
solidColor: `var(--joy-palette-common-white)`,
solidBg: `var(--joy-palette-neutral-600)`,
solidHoverBg: `var(--joy-palette-neutral-700)`,
solidActiveBg: `var(--joy-palette-neutral-800)`,
solidDisabledColor: `var(--joy-palette-neutral-700)`,
solidDisabledBg: `var(--joy-palette-neutral-900)`,
},
common: {
white: '#FFF',
black: '#09090D',
},
background: {
body: 'var(--joy-palette-neutral-900)',
surface: 'var(--joy-palette-common-black)',
popup: 'var(--joy-palette-neutral-900)',
level1: 'var(--joy-palette-neutral-800)',
level2: 'var(--joy-palette-neutral-700)',
level3: 'var(--joy-palette-neutral-600)',
},
},
},
},
});
危險
const danger = {
50: '#FFF8F6',
100: '#FFE9E8',
200: '#FFC7C5',
300: '#FF9192',
400: '#FA5255',
500: '#D3232F',
600: '#A10E25',
700: '#77061B',
800: '#580013',
900: '#39000D',
};
extendTheme({
colorSchemes: {
light: {
palette: {
danger: {
...danger,
plainColor: `var(--joy-palette-danger-600)`,
plainHoverBg: `var(--joy-palette-danger-100)`,
plainActiveBg: `var(--joy-palette-danger-200)`,
plainDisabledColor: `var(--joy-palette-danger-200)`,
outlinedColor: `var(--joy-palette-danger-500)`,
outlinedBorder: `var(--joy-palette-danger-200)`,
outlinedHoverBg: `var(--joy-palette-danger-100)`,
outlinedHoverBorder: `var(--joy-palette-danger-300)`,
outlinedActiveBg: `var(--joy-palette-danger-200)`,
outlinedDisabledColor: `var(--joy-palette-danger-100)`,
outlinedDisabledBorder: `var(--joy-palette-danger-100)`,
softColor: `var(--joy-palette-danger-600)`,
softBg: `var(--joy-palette-danger-100)`,
softHoverBg: `var(--joy-palette-danger-200)`,
softActiveBg: `var(--joy-palette-danger-300)`,
softDisabledColor: `var(--joy-palette-danger-300)`,
softDisabledBg: `var(--joy-palette-danger}-)50`,
solidColor: '#fff',
solidBg: `var(--joy-palette-danger-500)`,
solidHoverBg: `var(--joy-palette-danger-600)`,
solidActiveBg: `var(--joy-palette-danger-700)`,
solidDisabledColor: `#fff`,
solidDisabledBg: `var(--joy-palette-danger-200)`,
},
},
},
dark: {
palette: {
danger: {
...danger,
plainColor: `var(--joy-palette-danger-300)`,
plainHoverBg: `var(--joy-palette-danger-800)`,
plainActiveBg: `var(--joy-palette-danger-700)`,
plainDisabledColor: `var(--joy-palette-danger-800)`,
outlinedColor: `var(--joy-palette-danger-200)`,
outlinedBorder: `var(--joy-palette-danger-700)`,
outlinedHoverBg: `var(--joy-palette-danger-800)`,
outlinedHoverBorder: `var(--joy-palette-danger-600)`,
outlinedActiveBg: `var(--joy-palette-danger-900)`,
outlinedDisabledColor: `var(--joy-palette-danger-800)`,
outlinedDisabledBorder: `var(--joy-palette-danger-800)`,
softColor: `var(--joy-palette-danger-200)`,
softBg: `var(--joy-palette-danger-900)`,
softHoverBg: `var(--joy-palette-danger-800)`,
softActiveBg: `var(--joy-palette-danger-700)`,
softDisabledColor: `var(--joy-palette-danger-800)`,
softDisabledBg: `var(--joy-palette-danger-900)`,
solidColor: `#fff`,
solidBg: `var(--joy-palette-danger-600)`,
solidHoverBg: `var(--joy-palette-danger-700)`,
solidActiveBg: `var(--joy-palette-danger-800)`,
solidDisabledColor: `var(--joy-palette-danger-700)`,
solidDisabledBg: `var(--joy-palette-danger-900)`,
},
},
},
},
});
成功
const success = {
50: '#F3FEF5',
100: '#D7F5DD',
200: '#77EC95',
300: '#4CC76E',
400: '#2CA24D',
500: '#1A7D36',
600: '#0F5D26',
700: '#034318',
800: '#002F0F',
900: '#001D09',
};
extendTheme({
colorSchemes: {
light: {
palette: {
success: {
...success,
plainColor: `var(--joy-palette-success-600)`,
plainHoverBg: `var(--joy-palette-success-100)`,
plainActiveBg: `var(--joy-palette-success-200)`,
plainDisabledColor: `var(--joy-palette-success-200)`,
outlinedColor: `var(--joy-palette-success-500)`,
outlinedBorder: `var(--joy-palette-success-200)`,
outlinedHoverBg: `var(--joy-palette-success-100)`,
outlinedHoverBorder: `var(--joy-palette-success-300)`,
outlinedActiveBg: `var(--joy-palette-success-200)`,
outlinedDisabledColor: `var(--joy-palette-success-100)`,
outlinedDisabledBorder: `var(--joy-palette-success-100)`,
softColor: `var(--joy-palette-success-600)`,
softBg: `var(--joy-palette-success-100)`,
softHoverBg: `var(--joy-palette-success-200)`,
softActiveBg: `var(--joy-palette-success-300)`,
softDisabledColor: `var(--joy-palette-success-300)`,
softDisabledBg: `var(--joy-palette-success}-)50`,
solidColor: '#fff',
solidBg: `var(--joy-palette-success-500)`,
solidHoverBg: `var(--joy-palette-success-600)`,
solidActiveBg: `var(--joy-palette-success-700)`,
solidDisabledColor: `#fff`,
solidDisabledBg: `var(--joy-palette-success-200)`,
},
},
},
dark: {
palette: {
success: {
...success,
plainColor: `var(--joy-palette-success-300)`,
plainHoverBg: `var(--joy-palette-success-800)`,
plainActiveBg: `var(--joy-palette-success-700)`,
plainDisabledColor: `var(--joy-palette-success-800)`,
outlinedColor: `var(--joy-palette-success-200)`,
outlinedBorder: `var(--joy-palette-success-700)`,
outlinedHoverBg: `var(--joy-palette-success-800)`,
outlinedHoverBorder: `var(--joy-palette-success-600)`,
outlinedActiveBg: `var(--joy-palette-success-900)`,
outlinedDisabledColor: `var(--joy-palette-success-800)`,
outlinedDisabledBorder: `var(--joy-palette-success-800)`,
softColor: `var(--joy-palette-success-200)`,
softBg: `var(--joy-palette-success-900)`,
softHoverBg: `var(--joy-palette-success-800)`,
softActiveBg: `var(--joy-palette-success-700)`,
softDisabledColor: `var(--joy-palette-success-800)`,
softDisabledBg: `var(--joy-palette-success-900)`,
solidColor: '#fff',
solidBg: `var(--joy-palette-success-600)`,
solidHoverBg: `var(--joy-palette-success-700)`,
solidActiveBg: `var(--joy-palette-success-800)`,
solidDisabledColor: `var(--joy-palette-success-700)`,
solidDisabledBg: `var(--joy-palette-success-900)`,
},
},
},
},
});
警告
const warning = {
50: '#FFF8C5',
100: '#FAE17D',
200: '#EAC54F',
300: '#D4A72C',
400: '#BF8700',
500: '#9A6700',
600: '#7D4E00',
700: '#633C01',
800: '#4D2D00',
900: '#3B2300',
};
extendTheme({
colorSchemes: {
light: {
palette: {
warning: {
...warning,
plainColor: `var(--joy-palette-warning-800)`,
plainHoverBg: `var(--joy-palette-warning-50)`,
plainActiveBg: `var(--joy-palette-warning-200)`,
plainDisabledColor: `var(--joy-palette-warning-200)`,
outlinedColor: `var(--joy-palette-warning-800)`,
outlinedBorder: `var(--joy-palette-warning-200)`,
outlinedHoverBg: `var(--joy-palette-warning-50)`,
outlinedHoverBorder: `var(--joy-palette-warning-300)`,
outlinedActiveBg: `var(--joy-palette-warning-200)`,
outlinedDisabledColor: `var(--joy-palette-warning-100)`,
outlinedDisabledBorder: `var(--joy-palette-warning-100)`,
softColor: `var(--joy-palette-warning-800)`,
softBg: `var(--joy-palette-warning-50)`,
softHoverBg: `var(--joy-palette-warning-100)`,
softActiveBg: `var(--joy-palette-warning-200)`,
softDisabledColor: `var(--joy-palette-warning-200)`,
softDisabledBg: `var(--joy-palette-warning-50)`,
solidColor: `var(--joy-palette-warning-800)`,
solidBg: `var(--joy-palette-warning-200)`,
solidHoverBg: `var(--joy-palette-warning-300)`,
solidActiveBg: `var(--joy-palette-warning-400)`,
solidDisabledColor: `var(--joy-palette-warning-200)`,
solidDisabledBg: `var(--joy-palette-warning-50)`,
},
},
},
dark: {
palette: {
warning: {
...warning,
plainColor: `var(--joy-palette-warning-300)`,
plainHoverBg: `var(--joy-palette-warning-800)`,
plainActiveBg: `var(--joy-palette-warning-700)`,
plainDisabledColor: `var(--joy-palette-warning-800)`,
outlinedColor: `var(--joy-palette-warning-200)`,
outlinedBorder: `var(--joy-palette-warning-700)`,
outlinedHoverBg: `var(--joy-palette-warning-800)`,
outlinedHoverBorder: `var(--joy-palette-warning-600)`,
outlinedActiveBg: `var(--joy-palette-warning-900)`,
outlinedDisabledColor: `var(--joy-palette-warning-800)`,
outlinedDisabledBorder: `var(--joy-palette-warning-800)`,
softColor: `var(--joy-palette-warning-200)`,
softBg: `var(--joy-palette-warning-900)`,
softHoverBg: `var(--joy-palette-warning-800)`,
softActiveBg: `var(--joy-palette-warning-700)`,
softDisabledColor: `var(--joy-palette-warning-800)`,
softDisabledBg: `var(--joy-palette-warning-900)`,
solidColor: `var(--joy-palette-common-black)`,
solidBg: `var(--joy-palette-warning-300)`,
solidHoverBg: `var(--joy-palette-warning-400)`,
solidActiveBg: `var(--joy-palette-warning-500)`,
solidDisabledColor: `var(--joy-palette-warning-700)`,
solidDisabledBg: `var(--joy-palette-warning-900)`,
},
},
},
},
});
字型系列
若要保留舊字型系列，請將以下內容新增至您的主題
extendTheme({
fontFamily: {
display: '"Public Sans", var(--joy-fontFamily-fallback)',
body: '"Public Sans", var(--joy-fontFamily-fallback)',
},
});
字型大小
字型大小比例已縮減為
{
- xl7: '4.5rem',
- xl6: '3.75rem',
- xl5: '3rem',
xl4: '2.25rem',
xl3: '1.875rem',
xl2: '1.5rem',
xl: '1.25rem',
lg: '1.125rem',
md: '1rem',
sm: '0.875rem',
xs: '0.75rem',
- xs2: '0.625rem',
- xs3: '0.5rem',
}
若要保留舊字型大小比例，請將以下內容新增至您的主題
extendTheme({
fontSize: {
xl7: '4.5rem',
xl6: '3.75rem',
xl5: '3rem',
xs2: '0.625rem',
xs3: '0.5rem',
},
});
TypeScript
若您使用 TypeScript，請透過模組擴充將舊字型大小比例新增至主題的類型
// You can put this to any file that's included in your tsconfig
declare module '@mui/joy/styles' {
interface FontSizeOverrides {
xl7: true;
xl6: true;
xl5: true;
xs2: true;
xs3: true;
}
}
字型粗細
字型粗細比例已縮減為
{
- xs: 200,
sm: 300,
md: 500,
lg: 600,
xl: 700,
- xl2: 800,
- xl3: 900,
}
若要保留舊字型粗細比例，請將以下內容新增至您的主題
extendTheme({
fontWeight: {
xs: 200,
xl2: 800,
xl3: 900,
},
});
TypeScript
若您使用 TypeScript，請透過模組擴充將舊字型粗細比例新增至主題的類型
// You can put this to any file that's included in your tsconfig
declare module '@mui/joy/styles' {
interface FontWeightOverrides {
xs: true;
xl2: true;
xl3: true;
}
}
行高
字型大小比例已變更為
{
- sm: 1.25,
- md: 1.5,
- lg: 1.7,
+ xs: 1.33334, // largest font sizes for h1, h2
+ sm: 1.42858, // normal font sizes
+ md: 1.5, // normal font sizes
+ lg: 1.55556, // large font sizes for components
+ xl: 1.66667, // smallest font sizes
}
字距
字距比例已移除。若要重新新增，請將以下內容新增至您的主題
extendTheme({
letterSpacing: {
sm: '-0.01em',
md: '0.083em',
lg: '0.125em',
},
});
TypeScript
若您使用 TypeScript，請透過模組擴充將舊字距比例新增至主題的類型
// You can put this to any file that's included in your tsconfig
declare module '@mui/joy/styles' {
interface ThemeScales {
letterSpacing: {
sm: string;
md: string;
lg: string;
};
}
}
層級
預設排版層級比例 (theme.typography.*) 已重組為
h1
h2
h3
h4
+ title-lg
+ title-md
+ title-sm
+ body-lg
+ body-md
+ body-sm
+ body-xs
- display1
- display2
- h5 // recommend to use `title-lg` instead
- h6 // recommend to use `title-md` instead
- body1 // recommend to use `body-md` instead
- body2 // recommend to use `body-sm` instead
- body3 // recommend to use `body-xs` instead
- body4
- body5
此重組背後的原因是為了使層級更加一致且易於使用。h1 到 h4 層級旨在用於頁面標題，而 title-* 和 body-* 層級旨在用作頁面段落和組件文字。
title-* 和 body-* 層級設計為可組合的，這與 SvgIcon 組件的每個尺寸完美契合
title-lg：組件標題
body-md：這是組件的描述，其中包含一些相關資訊。
title-md：組件標題
body-md：這是組件的描述，其中包含一些相關資訊。
body-sm：metadata，例如日期。
title-sm：組件標題
body-sm：這是組件的描述，其中包含一些相關資訊。
body-xs：metadata，例如日期。陰影
陰影比例保持不變，但所有值都已變更。
若要保留舊陰影比例，請將以下內容新增至您的主題
extendTheme({
shadow: {
xs: `var(--joy-shadowRing, 0 0 #000),
0 1px 2px 0 rgba(var(--joy-shadowChannel, 187 187 187) / 0.12)`,
sm: `var(--joy-shadowRing, 0 0 #000),
0.3px 0.8px 1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.11),
0.5px 1.3px 1.8px -0.6px rgba(var(--joy-shadowChannel, 187 187 187) / 0.18),
1.1px 2.7px 3.8px -1.2px rgba(var(--joy-shadowChannel, 187 187 187) / 0.26)`,
md: `var(--joy-shadowRing, 0 0 #000),
0.3px 0.8px 1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.12),
1.1px 2.8px 3.9px -0.4px rgba(var(--joy-shadowChannel, 187 187 187) / 0.17),
2.4px 6.1px 8.6px -0.8px rgba(var(--joy-shadowChannel, 187 187 187) / 0.23),
5.3px 13.3px 18.8px -1.2px rgba(var(--joy-shadowChannel, 187 187 187) / 0.29)`,
lg: `var(--joy-shadowRing, 0 0 #000),
0.3px 0.8px 1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.11),
1.8px 4.5px 6.4px -0.2px rgba(var(--joy-shadowChannel, 187 187 187) / 0.13),
3.2px 7.9px 11.2px -0.4px rgba(var(--joy-shadowChannel, 187 187 187) / 0.16),
4.8px 12px 17px -0.5px rgba(var(--joy-shadowChannel, 187 187 187) / 0.19),
7px 17.5px 24.7px -0.7px rgba(var(--joy-shadowChannel, 187 187 187) / 0.21)`,
xl: `var(--joy-shadowRing, 0 0 #000),
0.3px 0.8px 1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.11),
1.8px 4.5px 6.4px -0.2px rgba(var(--joy-shadowChannel, 187 187 187) / 0.13),
3.2px 7.9px 11.2px -0.4px rgba(var(--joy-shadowChannel, 187 187 187) / 0.16),
4.8px 12px 17px -0.5px rgba(var(--joy-shadowChannel, 187 187 187) / 0.19),
7px 17.5px 24.7px -0.7px rgba(var(--joy-shadowChannel, 187 187 187) / 0.21),
10.2px 25.5px 36px -0.9px rgba(var(--joy-shadowChannel, 187 187 187) / 0.24),
14.8px 36.8px 52.1px -1.1px rgba(var(--joy-shadowChannel, 187 187 187) / 0.27), 21px 52.3px 74px -1.2px rgba(var(--joy-shadowChannel, 187 187 187) / 0.29)`,
},
});
組件
警示
預設變體已變更為 outlined，預設色彩已變更為 neutral。
若要保留舊預設變體和色彩，請將以下內容新增至您的主題
extendTheme({
components: {
JoyAlert: {
defaultProps: {
variant: 'soft',
color: 'primary',
},
},
},
});
自動完成
現在 input 和 listbox 插槽的變體和色彩相同。
如果您想為特定插槽使用不同的變體，請使用 slotProps。在以下範例中，listbox 插槽使用 plain 變體
<Autocomplete
variant="plain"
slotProps={{
listbox: {
variant: 'plain',
}
}}
>
晶片
預設變體已變更為 soft，預設色彩已變更為 neutral。
若要保留舊預設變體和色彩，請將以下內容新增至您的主題
extendTheme({
components: {
JoyChip: {
defaultProps: {
variant: 'solid',
color: 'primary',
},
},
},
});
晶片刪除
預設變體已變更為 plain，預設色彩已變更為 neutral。
若要保留舊預設變體和色彩，請將以下內容新增至您的主題
extendTheme({
components: {
JoyChipDelete: {
defaultProps: {
variant: 'solid',
color: 'primary',
},
},
},
});
圖示按鈕
預設變體已變更為 plain，預設色彩已變更為 neutral。
若要保留舊預設變體和色彩，請將以下內容新增至您的主題
extendTheme({
components: {
JoyIconButton: {
defaultProps: {
variant: 'soft',
color: 'primary',
},
},
},
});
標籤頁
Tabs 組件已根據我們在 此 GitHub issue 上收到的回饋進行重新設計。
第一個標籤頁面板
按下 Enter 鍵開始編輯
若要保留舊標籤頁設計，請將以下內容新增至您的主題
extendTheme({
components: {
JoyTabList: {
defaultProps: {
variant: 'soft',
disableUnderline: true,
},
styleOverrides: {
root: {
gap: '0.25rem',
padding: '0.25rem',
'--List-padding': '0.25rem',
borderRadius: 'var(--joy-radius-xl)',
'--List-radius': 'var(--joy-radius-xl)',
},
},
},
JoyTab: {
defaultProps: {
disableIndicator: true,
},
styleOverrides: {
root: {
'&[aria-selected="true"]': {
boxShadow: 'var(--joy-shadow-sm)',
backgroundColor: 'var(--joy-palette-background-surface)',
},
},
},
},
},
});
選擇
現在 button 和 listbox 插槽的變體和色彩相同。
如果您想為特定插槽使用不同的變體，請使用 slotProps。在以下範例中，listbox 插槽使用 plain 變體
<Select
variant="plain"
slotProps={{
listbox: {
variant: 'plain',
}
}}
>