Блог

Главная - Вопросы по программированию - Как использовать className для импорта стиля элемента react-js

Как использовать className для импорта стиля элемента react-js

#reactjs

#reactjs

Вопрос:

это мой код компонента

 import React from 'react';
import Aux from '../../hoc/Aux';
import classes from  './Layout.css';
const layout = (props) => (
    <Aux>
        <div>toolbar, sideshow, backdrop</div>
        <main className = {classes.Content}>
            {props.children}
        </main>
    </Aux>
);

export default layout;

в этом {props.children} просто <p> Hi </p> и это мой файл css

 .Content{
    margin: 2% auto;
}

почему стиль не работает?
classes.Content

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

1. Используете ли вы create-react-app для создания своего проекта?

2. Вы не можете напрямую импортировать css, например. Измените имя файла на это layout.module.css . Обратите внимание, что вам нужно добавить module ключевое слово в filename . Подробнее вы можете прочитать здесь

3. Можете ли вы попробовать использовать встроенный стиль, чтобы проверить, работает ли стиль? <main style={{ margin: "2% auto" }}>