LinkAPI

React Link 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

Link

Import

import Link from '@mui/joy/Link';
// or
import { Link } from '@mui/joy';

若要瞭解差異，請閱讀此關於最小化套件大小的指南。

Props

也提供原生元件的 Props。

名稱	類型	預設值	描述
children	node	-	元件的內容。
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'primary'	連結的色彩。若要瞭解如何新增您自己的色彩，請查看主題元件 — 擴充色彩。
component	elementType	-	用於根節點的元件。可以是字串 (使用 HTML 元素) 或元件。
disabled	bool	false	若 `true`，則停用元件。
endDecorator	node	-	放置在 children 之後的元素。
level	'body1' \| 'body2' \| 'body3' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'inherit' \| string	'body-md'	套用主題排版樣式。
overlay	bool	false	若 `true`，則會新增 ::after 虛擬元素以覆蓋互動區域。overlay Link 的父項應具有 `relative` CSS 位置。
slotProps	{ endDecorator?: func \| object, root?: func \| object, startDecorator?: func \| object }	{}	用於每個 slot 內部的 props。
slots	{ endDecorator?: elementType, root?: elementType, startDecorator?: elementType }	{}	用於每個 slot 內部的元件。如需更多詳細資訊，請參閱下方的Slots API。
startDecorator	node	-	放置在 children 之前的元素。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。如需更多詳細資訊，請參閱`sx` 頁面。
textColor	any	-	系統色彩。
underline	'always' \| 'hover' \| 'none'	'hover'	控制連結何時應有底線。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'plain'	套用主題連結樣式。若要瞭解如何新增您自己的 variants，請查看主題元件 — 擴充 variants。

ref 轉發到根元素。

主題預設 props

您可以使用 JoyLink 透過主題變更此元件的預設 props。

Slots

若要瞭解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.MuiLink-root	`'a'`	呈現 root 的元件。
startDecorator	.MuiLink-startDecorator	`'span'`	呈現 start decorator 的元件。
endDecorator	.MuiLink-endDecorator	`'span'`	呈現 end decorator 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。

類別名稱	規則名稱	描述
.Mui-disabled		若 `disabled={true}`，則套用至根元素的狀態類別。
.Mui-focusVisible		若連結為鍵盤焦點，則套用至根元素的狀態類別。
.MuiLink-body-lg	body-lg	若 `level="body-lg"`，則套用至根元素的類別名稱。
.MuiLink-body-md	body-md	若 `level="body-md"`，則套用至根元素的類別名稱。
.MuiLink-body-sm	body-sm	若 `level="body-sm"`，則套用至根元素的類別名稱。
.MuiLink-body-xs	body-xs	若 `level="body-xs"`，則套用至根元素的類別名稱。
.MuiLink-colorContext	colorContext	當觸發色彩反轉時，套用至根元素的類別名稱。
.MuiLink-colorDanger	colorDanger	若 `color="danger"`，則套用至根元素的類別名稱。
.MuiLink-colorNeutral	colorNeutral	若 `color="neutral"`，則套用至根元素的類別名稱。
.MuiLink-colorPrimary	colorPrimary	若 `color="primary"`，則套用至根元素的類別名稱。
.MuiLink-colorSuccess	colorSuccess	若 `color="success"`，則套用至根元素的類別名稱。
.MuiLink-colorWarning	colorWarning	若 `color="warning"`，則套用至根元素的類別名稱。
.MuiLink-h1	h1	若 `level="h1"`，則套用至根元素的類別名稱。
.MuiLink-h2	h2	若 `level="h2"`，則套用至根元素的類別名稱。
.MuiLink-h3	h3	若 `level="h3"`，則套用至根元素的類別名稱。
.MuiLink-h4	h4	若 `level="h4"`，則套用至根元素的類別名稱。
.MuiLink-title-lg	title-lg	若 `level="title-lg"`，則套用至根元素的類別名稱。
.MuiLink-title-md	title-md	若 `level="title-md"`，則套用至根元素的類別名稱。
.MuiLink-title-sm	title-sm	若 `level="title-sm"`，則套用至根元素的類別名稱。
.MuiLink-underlineAlways	underlineAlways	若 `underline="always"`，則套用至根元素的類別名稱。
.MuiLink-underlineHover	underlineHover	若 `underline="hover"`，則套用至根元素的類別名稱。
.MuiLink-underlineNone	underlineNone	若 `underline="none"`，則套用至根元素的類別名稱。
.MuiLink-variantOutlined	variantOutlined	若 `variant="outlined"`，則套用至根元素的類別名稱。
.MuiLink-variantPlain	variantPlain	若 `variant="plain"`，則套用至根元素的類別名稱。
.MuiLink-variantSoft	variantSoft	若 `variant="soft"`，則套用至根元素的類別名稱。
.MuiLink-variantSolid	variantSolid	若 `variant="solid"`，則套用至根元素的類別名稱。

您可以使用以下其中一種自訂選項來覆寫元件樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為元件 styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。