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

1 个答案: