为什么我的 scss 样式不适用于三元表达式

Question

谁能解释为什么我的 scss 样式不适用于基于三元表达式显示的代码？我已经粘贴了样式代码和组件。我也尝试过添加内联样式，但这也不起作用，如果可能的话，我真的宁愿避免这样做。

import React, {useState} from 'react';
import Axios from 'axios';
import '../Styles/City.css';

const City = () => {
    const [city, setCity] = useState();
    const [airQuality, setAirQuality] = useState();
   
    let rand;
    const randomNum = () => {
        const min = 0;
        const max = 100;
        rand = min + Math.floor(Math.random() * (max - min));
        console.log(rand)
        
    }
    const getCity = () => {
        Axios.get(`https://api.openaq.org/v1/measurements?country=GB`).then((response) => {
            console.log(response)
            setCity(response.data.results[rand].city)
            setAirQuality(response.data.results[rand].value)
        })
    }
    
    return (
        <div className="city-data-wrapper">
            {city ? <div className="data-conatiner" >
                <span className="city">City: {city}</span>
                <span className="air-quality">Air Quality: {airQuality} </span>
            </div> : <span>Click the button</span>}
            
            <button className="btn" onClick={() => {randomNum(); getCity();}}>Get Random City</button>
            
            
        </div>
    );
};

export default City;

css

 @import '../Styles/Variables/variables.scss';
    .App {
        @include cardStyles();
    }
    .city-data-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.data-container {
    display: flex;
    flex-direction: column;
    line-height: 2rem;
    border: 3px solid purple;
    border-radius: 6%;
    padding: 1rem;
    margin: 2rem;
}
.btn{
    @include buttonStyle();
}

Answer 1

您正在导入 City.css，可以吗？或者是 City.scss

Answer 2

class 名称中的错字。我不会拼写总有一天会要我的命。

为什么我的 scss 样式不适用于三元表达式

Why my scss styles aren't working on ternary expression

css

sass

reactjs