外部样式

什么是外部样式

外部样式是一种将样式从 HTML 文档中分离出来的方法。这种方法的优势在于可以将样式应用到多个页面上，而不必重复编写样式。

基本用法

设置外部样式。

.default-external {
    font-size: 50px;
}

.external-active {
    color: #646cffaa;
}

.external-inactive {
    color: #888;
}

使用className属性设置类名。

import './ExternalStyle.css';

export default function ExternalStyleA() {
    return (
        <div className="external-active">External Style A</div>
    );
}

使用三元表达式设置动态样式。

import './ExternalStyle.css';

export default function ExternalStyleB({ selected }: { selected: boolean }) {
    return (
        <div className={
            selected ? "external-active" : "external-inactive"
        }>External Style B</div>
    );
}

使用模版字符串。

import './ExternalStyle.css';

export default function ExternalStyleC({ selected }: { selected: boolean }) {
    return (
        <div className={
            `default-external ${selected ? 'external-active' : 'external-inactive'}`
        }>External Style C</div>
    );
}