下划线组件（Underline）

Markdown中并不支持下划线，但是在写博客或者文档时，我们希望在某些内容下加上下划线，以表示这些内容很重要。

一种方式是使用HTML标签，<u></u>来实现在文字下加下划线的功能，如下：

<u>云想衣裳花想容，春风拂槛露华浓。</u>

html

云想衣裳花想容，春风拂槛露华浓。

但是这种方式有一个弊端，就是无法设置下划线颜色。因此我们定义一个可以设置下划线颜色的组件。

定义下划线组件

src/components/Underline.js

import React from 'react';

export default function Underline({children, c = 'red'}) {
    return (
        <span style={{textDecoration: 'underline', textDecorationColor: c}}>
          {children}
        </span>
    );
}

tsx

这个组件的默认下划线颜色为红色。可以通过传入参数改变下划线颜色。

组件的使用

首先需要引入组件

import Underline from '@site/src/components/Underline';

ts

默认颜色下划线

<Underline>云想衣裳花想容，春风拂槛露华浓。</Underline>

html

云想衣裳花想容，春风拂槛露华浓。

下划线颜色设置为蓝色

<Underline c="blue">云想衣裳花想容，春风拂槛露华浓。</Underline>

html

云想衣裳花想容，春风拂槛露华浓。