排版
排版組件有助於清晰有效地呈現設計和內容。
簡介
排版組件透過提供一組有限的值供選擇，以及方便的屬性，以更快地建構常見設計，從而協助維持一致的設計。
Lorem ipsum 是佔位文字，常在圖形、印刷和出版產業中使用，以預覽版面配置和視覺模擬稿。
<Typography />範例展示
國家公園
優勝美地國家公園
優勝美地國家公園是一個國家公園，佔地 747,956 英畝（1,169.4 平方英里；3,025.2 平方公里），位於加州中部內華達山脈西部。
h1: Lorem ipsum
h2: What is Lorem Ipsum?
h3: The standard Lorem Ipsum passage.
h4: 頁面最小的標題
標題和內文
除了標題排版層級之外，排版組件也提供 title-* 和 body-* 類型層級。
為了確保適當的資訊層級結構，我們建議將它們與相同大小或更小的大小組合使用。例如，將 title-lg 與 body-lg 或 title-md 與 body-sm 一起使用。
組件標題 title-lg
這是組件的描述，其中包含一些相關資訊。 body-md
組件標題 title-md
這是組件的描述，其中包含一些相關資訊。 body-md
Metadata，例如日期。 body-sm
組件標題 title-sm
這是組件的描述，其中包含一些相關資訊。 body-sm
Metadata，例如日期。 body-xs巢狀排版
預設情況下，排版組件會呈現為 <p>。巢狀排版組件會呈現為 <span> 元素（除非透過component 屬性自訂）。
排版讓您建立 巢狀排版。運用您的 想像力 來建構美好的 使用者介面.
自訂
系統屬性
作為 CSS utility 組件，排版支援每個 MUI System 屬性。這些屬性可用於自訂組件的樣式，並使其與整體設計無縫接軌。
// Using the neutral color palette that defaults to the 500 value
<Typography color="neutral" fontSize="sm" fontWeight="lg" />
// Changing the specific element's color to neutral
<Typography textColor="neutral.300" fontSize="sm" fontWeight="lg" >
層級
level 屬性可存取主題中定義的預定義排版值比例。這些值包括各種標題層級（h1、h2、h3 等）以及內文文字層級（body-md、body-sm 等），可用於在整個應用程式中套用一致的排版。此外，您也可以使用 level 屬性來控制字體大小、粗細、行高和其他排版屬性。
h1
h2
h3
h4
title-lg
title-md
title-sm
body-lg
body-md
body-sm
body-xs語意元素
若要自訂使用的語意元素，您可以使用 component 屬性。這在您想要使用與 level 屬性指定的語意元素不同的元素時很有用。組件將呈現為 component 定義的 HTML 元素，但具有指派給其各自 level 的樣式。
// There's already an h1 on the page so let's not add another one.
<Typography level="h1" component="h2">
I render as an h2, but I have h1 styles
</Typography>
以更有效率的方式，您可以在主題層級變更 HTML 對應標籤。
const theme = extendTheme({
components: {
JoyTypography: {
defaultProps: {
levelMapping: {
h1: 'h2',
h2: 'h2',
h3: 'h3',
h4: 'h3',
'title-lg': 'p',
'title-md': 'p',
'title-sm': 'p',
'body-md': 'p',
'body-sm': 'p',
'body-xs': 'span',
},
},
},
},
});
裝飾器
使用 startDecorator 和 endDecorator 屬性將支援圖示或元素新增至排版。
圖示會自動調整為縮放比例
顯示方式也會變更為 flexbox123
排版縮放比例
若要建立自訂排版比例，您可以在主題層級的 theme.typography 節點中定義鍵和值。
extendTheme({
typography: {
subtitle: {
fontSize: 'var(--joy-fontSize-lg)',
fontWeight: 'var(--joy-fontWeight-md)',
// CSS selectors are also supported!
'& + p': {
marginTop: '4px',
},
},
label: {
fontSize: 'var(--joy-fontSize-sm)',
fontWeight: 'var(--joy-fontWeight-lg)',
lineHeight: 'var(--joy-lineHeight-lg)',
marginBottom: '3px',
},
},
});
您也可以從 level 屬性存取新建立的層級
<Typography level="subtitle">
<Typography level="label">
移除預設比例
若要移除任何未使用的排版層級（例如，如果您要建構自己的完全自訂比例），您可以透過在主題中將 undefined 指派給它們來清除內建值。
extendTheme({
typography: {
h1: undefined,
h2: undefined,
h3: undefined,
h4: undefined,
'title-lg': undefined,
'title-md': undefined,
'title-sm': undefined,
'body-lg': undefined,
'body-md': undefined,
'body-sm': undefined,
'body-xs': undefined,
// ...your scale
},
});
使用 TypeScript 時，請務必也從類型中移除內建的排版 tokens。
// in your theme or index file
declare module '@mui/joy/styles' {
interface TypographySystemOverrides {
h1: false;
h2: false;
h3: false;
h4: false;
'title-lg': false;
'title-md': false;
'title-sm': false;
'body-lg': false;
'body-md': false;
'body-sm': false;
'body-xs': false;
}
}
常見範例
下方的範例展示說明了排版組件的多種用法，以及其他作為裝飾器的用法。
非作用中
$25
此範例展示了文字的多行顯示。
🚨僅使用排版的簡易警示。
+8.2%自上個月以來
無障礙功能
以下是一些確保您的排版組件具有無障礙功能的因素
- 確保文字和背景之間有足夠的色彩對比度，使用至少 WCAG 2.0 的色彩對比度比率 4.5:1。
- 使用 相對單位，例如 rem 作為
fontSize，以符合使用者的設定。 - 使用一致的 標題層級結構，並避免跳過層級。
- 透過使用適當的語意元素（#semantic-elements），將語意和樣式分開。
結構
排版組件由單一根 <p> 組成，該 <p> 組件被指派 body-md 類別，除非這些預設值被 level 和/或 component 屬性覆寫。
當一個排版組件巢狀於另一個組件內時，巢狀組件會呈現為 <span>（除非如上所述進行自訂）。
<p class="MuiTypography-root MuiTypography-body-md">
<!-- Typography content -->
<span class="MuiTypography-root MuiTypography-inherit">
<!-- Nested Typography content -->
</span>
</p>