Блог

Главная - Вопросы по программированию - Я экспортирую переменные значения CSS, почему они не применяются?

Я экспортирую переменные значения CSS, почему они не применяются?

#css #create-react-app #css-variables #react-typescript #react-css-modules

#css #create-react-app #css-переменные #react-typescript #react-css-modules

Вопрос:

Я использую create-react-app с шаблоном TypeScript и пытаюсь реализовать переменные цвета следующим образом в файле styles / colors.css:

 @value MainBlue: #255EDF;
@value MainOrange: #FF6F4A;
@value MainYellow: #FFD640;

Когда я иду импортировать их (см. Ниже) в модуль CSS, они не реализуются.

 @value MainYellow from '~styles/colors.css';

.homePage {
  background-color: MainYellow;
  text-align: center;
}
 
 import styles from './homePage.module.css';

const HomePage = () => {
    return (
        <div className={styles.homePage}>Home</div>
    );
};

export default HomePage;

Чего мне не хватает для их применения?

Ответ №1:

Этот синтаксис сделает свое дело!

 :root {
  --MainBlue: #255EDF;
  --MainOrange: #FF6F4A;
  --MainYellow: #FFD640;
}
.homePage {
  background-color: var(--MainYellow);
  text-align: center;
} 
 <div class="homePage">Home</div>

Комментарии:

1. По какой-то причине это, похоже, тоже не работает. Просто чтобы уточнить, вы говорите :root { --MainBlue: #255EDF; --MainOrange: #FF6F4A; --MainYellow: #FFD640; } .homePage { background-color: var(--MainYellow); text-align: center; } , что все это должно быть в одном файле?

Метки: