Can anyone shed some light on why my scss styles do not work on code that is displayed based on a ternary expression? I have pasted the styling code and component. I have also tried adding the style inline but that didn't work either and I would really rather avoid that if possible.

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();
}

CodePudding user response：

You are importing City.css, is it ok? Or is it City.scss

CodePudding user response：

Typo in the class name. My inability to spell will one day be the death of me.