CSS не применяется к jsx
Это файл css с именем Layout.css:
.Content {
margin-top: 16px;
color : red;
}
и это компонент с именем Layout.js:
import React from 'react';
import classes from './Layout.css';
// const Fragment = React.Fragment;
const { Fragment } = React;
const Layout = (props) => {
return (
<Fragment>
<div> toolbar , sidedrawer , backdrop </div>
<main className = {classes.Content}>{props.children}</main>
</Fragment>
);
};
export default Layout;
и проблема в том, что css не применяется к компоненту, у меня есть эта проблема в нескольких моих компонентах.
@ supra28 да, я знаю
Вы используете импорт и используете его неправильно, я добавил ответ
Ответы 1
Вам нужно импортировать файл css следующим образом:
import './Layout.css';
а затем используйте класс следующим образом:
<main className = "Content">{props.children}</main>
ваше решение правильное, но я вижу этот метод «импорта классов из» в некоторых местах, и он работал. есть идеи, почему это не работает в моем коде?
Это работает, когда вы фактически экспортируете что-то из своего файла, например класс или функцию. В основном вы увидите, что в решениях css-in-js, где css записывается в файл js, а затем экспортируется, здесь вы ничего не экспортируете.
это из какого-то учебника, и этот метод импорта CSS работает
Я думаю, они используют css-модули, вы можете проверить это medium.com/nulogy/…
вы используете приложение create-response-app?