1

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

报告.sass：

.city {
    color: red;
}

报告.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 文件。这通过失败，如下所示：

报告.sass：

#city {
    color: red;
}

报告.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 命令与cityid 一起工作？

4

1 回答 1

0

我认为对 css 和 html 存在一些误解。

您可以为每个 html 元素同时拥有 aclass和tag。id

因此，如果您有以下内容，它将编译得很好：

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

这是一种在 React 中应用样式的非正统方式。更简单的方法是通过导入样式表

import './Report.scss';

那么您可以像这样更自由地使用您的样式：

<div id="NewYork" className="city">
于 2018-11-26T02:22:40.017 回答