文档演练博客

重置

从任何组件中删除默认浏览器样式。

View source Report an issue

API 参考

¥API Reference

重置组件用于主动重置特定元素的浏览器样式。

¥Reset component is used to aggressively reset browser styles on a specific element.

它渲染的插槽基础组件具有以下特性：

¥It renders a Slot primitive that:

接受单个 React 元素作为其子元素

¥Accepts a single React element as its child
移除自以为是的浏览器样式

¥Removes opinionated browser styles
设置惯用的布局默认值，例如图片的 display: block 或输入的 width: stretch

¥Sets idiomatic layout defaults, like display: block for images or width: stretch for inputs
根据你的主题设置设置 cursor 样式

¥Sets the cursor style according to your theme settings
添加 box-sizing: border-box

¥Adds box-sizing: border-box

示例

¥Examples

锚点

¥Anchor

Anchor

<Reset>
	<a href="#">Anchor</a>
</Reset>

缩写

¥Abbreviation

ABR

<Reset>
	<abbr title="Abbreviation">ABR</abbr>
</Reset>

地址

¥Address

Address

<Reset>
	<address>Address</address>
</Reset>

文章

¥Article

Article

<Reset>
	<article>Article</article>
</Reset>

旁白

¥Aside

<Reset>
	<aside>Aside content</aside>
</Reset>

粗体

¥Bold

Bold text

<Reset>
	<b>Bold text</b>
</Reset>

双向隔离

¥Bi-directional isolation

Bi-directional isolation

<Reset>
	<bdi>Bi-directional isolation</bdi>
</Reset>

双向覆盖

¥Bi-directional override

Bi-directional override

<Reset>
	<bdo>Bi-directional override</bdo>
</Reset>

区块引用

¥Block quote

Block quote

<Reset>
	<blockquote>Block quote</blockquote>
</Reset>

按钮

¥Button

<Reset>
	<button>Button</button>
</Reset>

引用

¥Citation

Citation

<Reset>
	<cite>Citation</cite>
</Reset>

代码

¥Code

Computer code

<Reset>
	<code>Computer code</code>
</Reset>

数据

¥Data

Machine-readable equivalent

<Reset>
	<data>Machine-readable equivalent</data>
</Reset>

已删除文本

¥Deleted text

~~Deleted text~~

<Reset>
	<del>Deleted text</del>
</Reset>

详细信息

¥Details

Summary for a details element

Additional details

<Reset>
	<details>
		<summary>Summary for a details element</summary>
		Additional details
	</details>
</Reset>

定义

¥Definition

Definition

<Reset>
	<dfn>Definition</dfn>
</Reset>

Div

<Reset>
	<div>Div</div>
</Reset>

强调文本

¥Emphasized text

Emphasized text

<Reset>
	<em>Emphasized text</em>
</Reset>

字段集

¥Fieldset

Fieldset

<Reset>
	<fieldset>Fieldset</fieldset>
</Reset>

图片

¥Figure

Figure

<Reset>
	<figure>Figure</figure>
</Reset>

图片标题

¥Figure caption

Figure caption

<Reset>
	<figcaption>Figure caption</figcaption>
</Reset>

页脚

¥Footer

<Reset>
	<footer>Footer</footer>
</Reset>

表单

¥Form

<Reset>
	<form>Form</form>
</Reset>

标题

¥Heading

Heading

<Reset>
	<h1>Heading</h1>
</Reset>

标题

¥Header

Header

<Reset>
	<header>Header</header>
</Reset>

斜体文本

¥Italic text

Italic text

<Reset>
	<i>Italic text</i>
</Reset>

内联框架

¥Inline frame

重置时，<iframe> 元素将获得 display: block 和 width: stretch。

¥When reset, <iframe> elements get display: block and width: stretch.

<Reset>
	<iframe src="https://example.com" />
</Reset>

图片

¥Image

重置时，<img> 元素将获得 display: block 和 max-width: 100%。

¥When reset, <img> elements get display: block and max-width: 100%.

<Reset>
	<img src="https://images.unsplash.com/photo-1556825578-5813abf36e34?q=80&w=3864&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</Reset>

输入

¥Input

重置时，文本 <input> 类型将获得 display: block 和 width: stretch。

¥When reset, textual <input> types get display: block and width: stretch.

<Reset>
	<input placeholder="Input control" />
</Reset>

插入文本

¥Inserted text

Inserted text

<Reset>
	<ins>Inserted text</ins>
</Reset>

键盘输入

¥Keyboard input

Keyboard input

<Reset>
	<kbd>Keyboard input</kbd>
</Reset>

图例

¥Legend

Legend

<Reset>
	<legend>Legend</legend>
</Reset>

列表项

¥List item

List item

<Reset>
	<li>List item</li>
</Reset>

主页

¥Main

Main

<Reset>
	<main>Main</main>
</Reset>

标记文本

¥Marked text

Marked text

<Reset>
	<mark>Marked text</mark>
</Reset>

有序列表

¥Ordered list

Coffee
Tea
Milk

<Reset>
	<ol>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ol>
</Reset>

输出

¥Output

Output

<Reset>
	<output>Output</output>
</Reset>

段落

¥Paragraph

Paragraph

<Reset>
	<p>Paragraph</p>
</Reset>

预格式化文本

¥Preformatted text

Preformatted text: "    "

<Reset>
	<pre>{'Preformatted text: "    "'}</pre>
</Reset>

引用

¥Quote

Quote

<Reset>
	<q>Quote</q>
</Reset>

删除线文本

¥Strikethrough text

~~Strikethrough text~~

<Reset>
	<s>Strikethrough text</s>
</Reset>

示例输出

¥Sample output

Sample output

<Reset>
	<samp>Sample output</samp>
</Reset>

部分

¥Section

Section

<Reset>
	<section>Section</section>
</Reset>

选择

¥Select

<Reset>
	<select>
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
	</select>
</Reset>

小文本

¥Small text

Small text

<Reset>
	<small>Small text</small>
</Reset>

跨度

¥Span

Span

<Reset>
	<span>Span</span>
</Reset>

强文本

¥Strong text

Strong text

<Reset>
	<strong>Strong text</strong>
</Reset>

下标文本

¥Subscript text

_{Subscript text}

<Reset>
	<sub>Subscript text</sub>
</Reset>

上标文本

¥Superscript text

^{Superscript text}

<Reset>
	<sup>Superscript text</sup>
</Reset>

SVG

重置时，<svg> 元素将获得 display: block、max-width: 100% 和 flex-shrink: 0。

¥When reset, <svg> elements get display: block, max-width: 100%, and flex-shrink: 0.

<Reset>
	<svg
		width="76"
		height="24"
		viewBox="0 0 76 24"
		fill="currentcolor"
		xmlns="http://www.w3.org/2000/svg"
	>
		<path d="M43.9022 20.0061H46.4499C46.2647 19.0375 46.17 18.1161 46.17 17.0058V12.3753C46.17 9.25687 44.3893 7.72127 41.1943 7.72127C38.3003 7.72127 36.3324 9.23324 36.0777 11.8083H38.9254C39.0181 10.698 39.8052 9.96561 41.1017 9.96561C42.4446 9.96561 43.3243 10.6743 43.3243 12.1391V12.7061L39.8052 13.1077C37.4206 13.3912 35.5684 14.3834 35.5684 16.7931C35.5684 18.9666 37.2353 20.2659 39.5274 20.2659C41.4027 20.2659 42.9845 19.4863 43.6401 18.1161C43.6689 18.937 43.9022 20.0061 43.9022 20.0061ZM40.3377 18.1634C39.157 18.1634 38.5087 17.5727 38.5087 16.6278C38.5087 15.3757 39.4579 15.0922 40.7082 14.9268L43.3243 14.6197V15.352C43.3243 17.242 41.8658 18.1634 40.3377 18.1634ZM56.2588 20.0061H59.176V3H56.2125V9.96561C55.6569 8.76075 54.3141 7.72127 52.4851 7.72127C49.3058 7.72127 47.099 10.2963 47.099 14.0054C47.099 17.7381 49.3058 20.2896 52.4851 20.2896C54.2678 20.2896 55.68 19.2973 56.2588 18.0925V20.0061ZM56.282 14.218C56.282 16.5569 55.1938 18.0689 53.3185 18.0689C51.3969 18.0689 50.1856 16.486 50.1856 14.0054C50.1856 11.5485 51.3969 9.94198 53.3185 9.94198C55.1938 9.94198 56.282 11.454 56.282 13.7928V14.218ZM60.9066 5.97304H64.0553V3.01996H60.9066V5.97304ZM60.9992 20.0061H63.9627V8.00476H60.9992V20.0061ZM67.6638 20.0061L70.6041 15.8954L73.5212 20.0061H76.9246L72.3636 13.7219L76.5542 8.00476H73.3823L70.7661 11.7138L68.1731 8.00476H64.7697L69.0066 13.8637L64.4919 20.0061H67.6638Z" />
		<path
			fillRule="evenodd"
			clipRule="evenodd"
			d="M24.9132 20V14.0168H28.7986L32.4513 20H35.7006L31.6894 13.5686C33.5045 12.986 35.0955 11.507 35.0955 9.01961C35.0955 5.7479 32.7994 4 28.9571 4H22V20H24.9132ZM24.9132 6.35294V11.6863H28.821C31.0395 11.6863 32.1599 10.7675 32.1599 9.01961C32.1599 7.27171 30.9395 6.35294 28.621 6.35294H24.9132Z"
		/>
		<path d="M7 23C3.13401 23 0 19.6422 0 15.5C0 11.3578 3.13401 8 7 8V23Z" />
		<path d="M7 0H0V7H7V0Z" />
		<path d="M11.5 7C13.433 7 15 5.433 15 3.5C15 1.567 13.433 0 11.5 0C9.56704 0 8 1.567 8 3.5C8 5.433 9.56704 7 11.5 7Z" />
	</svg>
</Reset>

表格

¥Table

Table caption
Column header	Column header
Row header	Cell data
Row header	Cell data
Row header	Cell data

<Reset>
	<table>
		<Reset>
			<caption>Table caption</caption>
		</Reset>

		<Reset>
			<thead>
				<Reset>
					<tr>
						<Reset>
							<th scope="col">Column header</th>
						</Reset>
						<Reset>
							<th scope="col">Column header</th>
						</Reset>
					</tr>
				</Reset>
			</thead>
		</Reset>

		<Reset>
			<tbody>
				<Reset>
					<tr>
						<Reset>
							<th scope="row">Row header</th>
						</Reset>
						<Reset>
							<td>Cell data</td>
						</Reset>
					</tr>
				</Reset>
				<Reset>
					<tr>
						<Reset>
							<th scope="row">Row header</th>
						</Reset>
						<Reset>
							<td>Cell data</td>
						</Reset>
					</tr>
				</Reset>
			</tbody>
		</Reset>

		<Reset>
			<tfoot>
				<Reset>
					<tr>
						<Reset>
							<th scope="row">Row header</th>
						</Reset>
						<Reset>
							<td>Cell data</td>
						</Reset>
					</tr>
				</Reset>
			</tfoot>
		</Reset>
	</table>
</Reset>

文本区域

¥Text area

<Reset>
	<textarea placeholder="Text area" />
</Reset>

时间

¥Time

Time

<Reset>
	<time dateTime="2021-01-01">Time</time>
</Reset>

未清晰注释

¥Unarticulated annotation

Unarticulated annotation

<Reset>
	<u>Unarticulated annotation</u>
</Reset>

无序列表

¥Unordered list

Coffee
Tea
Milk

<Reset>
	<ul>
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ul>
</Reset>

变量

¥Variable

Variable

<Reset>
	<var>Variable</var>
</Reset>

Previous门户

Next插槽

概览

主题

布局

排版

组件

实用工具

重置

Heading