Доступ к HTML по идентификатору через SASS

Question

Есть ли возможность доступа к элементу HTML по идентификатору через SASS?Я использую SASS в сочетании с React в файлах TSX.Обычно для стилизации я определяю запись 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 идентификатор, мне бы также пришлось соответствующим образом изменить файл 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.

Вы можете иметь теги class и id для каждого элемента HTML.

Поэтому он будет компилироваться нормально, если выиметь следующее:

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

Это неортодоксальный способ применения стилей в React.Более простой способ - импортировать таблицу стилей через

import './Report.scss';

, тогда вы можете использовать свои стили более свободно, например:

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