重置

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

查看源代码报告问题

API 参考

Reset 组件用于在特定元素上积极地重置浏览器样式。

它渲染一个 Slot 原生组件，它

接受单个 React 元素作为其子元素
删除有见地的浏览器样式
设置惯用的布局默认值，例如 display: block 对于图像或 width: stretch 对于输入
根据您的主题设置设置光标样式
添加 box-sizing: border-box

示例

锚点

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

缩写

ABR

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

地址

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

文章

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

旁白

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

粗体

粗体文本

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

双向隔离

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

双向覆盖

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

块引用

块引用

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

按钮

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

引用

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

代码

计算机代码

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

数据

机器可读等效物

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

删除的文本

~~删除的文本~~

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

细节

细节元素的摘要

其他细节

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

定义

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

Div

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

强调文本

强调文本

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

字段集

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

图片

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

图片标题

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

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

表单

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

标题

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

页眉

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

斜体文本

斜体文本

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

内联框架

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

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

图像

重置后，<img> 元素将获得 display: block 和 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> 类型将获得 display: block 和 width: stretch。

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

插入的文本

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

键盘输入

键盘输入

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

图例

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

列表项

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

主要

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

标记文本

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

<Reset>
  <nav>Navigation</nav>
</Reset>

有序列表

咖啡
茶
牛奶

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

输出

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

段落

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

预格式化文本

Preformatted text: "    "

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

引用

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

删除线文本

~~删除线文本~~

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

示例输出

示例输出

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

部分

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

选择

<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>

小文本

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

跨度

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

粗体文本

粗体文本

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

下标文本

_下标文本

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

上标文本

^上标文本

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

SVG

重置后，<svg> 元素将获得 display: block，max-width: 100% 和 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>

表格

表格标题
列标题	列标题
行标题	单元格数据
行标题	单元格数据
行标题	单元格数据

<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>

文本区域

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

时间

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

未表述的注释

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

无序列表

咖啡
茶
牛奶

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

变量

变量

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

上一个Portal

下一个Slot

在 GitHub 上编辑此页面。

概述

主题

布局

字体

组件

实用工具

重置

标题