答案组件（Solution）

答案组件用于在文档中插入习题答案。

组件定义

src/components/Solution/index.tsx

import React from 'react';
import MDXContent from '@theme/MDXContent';
import styles from './style.module.css'

export default function Solution({children}) {
    return (<div className={styles.solutionContainer}>
        <p className={styles.keyword}>Solution</p>
        <MDXContent>
            {children}
        </MDXContent>
    </div>);
}

tsx

src/components/Solution/style.module.css

.solutionContainer {
    border: 1px solid #4E9EEF;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: rgba(201,213,225,0.1)
}

.keyword {
    font-weight: bold;
    color: #4E9EEF;
    font-size: 1.2rem;
}

tsx

组件使用

**例：** 计算$(-4,5),(3,2)$两点之间的距离

<Solution>

$$
\begin{array}{ll}
d=\sqrt{[3-(-4)]^2 + (2-5)^2} &= \sqrt{7^2+(-3)^2} \\
&=\sqrt{49+9} \\
&=\sqrt{58} \\
&\approx 7.62
\end{array}
$$

</Solution>

markdown

例： 计算$(-4,5),(3,2)$两点之间的距离

Solution

$$\begin{array}{ll} d=\sqrt{[3-(-4)]^2 + (2-5)^2} &= \sqrt{7^2+(-3)^2} \\ &=\sqrt{49+9} \\ &=\sqrt{58} \\ &\approx 7.62 \end{array}$$