通过 SASS 通过 id 访问 HTML

Question

是否可以通过 SASS 通过 id 访问 HTML 元素？我在 TSX 文件中将 SASS 与 React 结合使用。通常对于样式我会定义一个 SASS 条目并将该条目添加到类的列表中，如下例所示：

Report.sass:

.city {
    color: red;
}

Report.tsx:

import * as React from "react";
import * as Style from "./Report.scss";

export class Report extends React.Component<{}, {}> {
    public render() {
        return <div className={Style.city}>Test text for cities</div>;
    }
}

这个例子工作得很好。但是如果我现在给 div 标签一个 id，我还需要相应地更改 SASS 文件。这通过失败，如下所示：

Report.sass:

#city {
    color: red;
}

Report.tsx:

import * as React from "react";
import * as Style from "./Report.scss";

export class Report extends React.Component<{}, {}> {
    public render() {
        return <div id="city">Test text for cities</div>;
    }
}

我相信 SASS 文件忘记了 #city 条目，因为 Report.tsx 中没有指向它的指针。我对这个假设是否正确？我怎样才能使 SASS 命令与 city id 一起工作？

Answer 1

我觉得大家对css和html有一些误解。

每个 html 元素可以同时具有 class 和 id 标签。

因此，如果你有以下内容，它会编译正常：

<div id="NewYork" className={Style.city}>

虽然这是在 React 中应用样式的非正统方式。更简单的方法是通过

导入样式表

import './Report.scss';

然后你就可以更自由地使用你的风格了：

<div id="NewYork" className="city">

通过 SASS 通过 id 访问 HTML

Access HTML by id through SASS

css

sass

jsx

reactjs

tsx