Блог

Главная - Вопросы по программированию - Добавление CSS в компонент react

Добавление CSS в компонент react

#css #reactjs

#css #reactjs

Вопрос:

Я пытаюсь добавить css в свой недавно созданный компонент. Когда я использую встроенные стили, это работает. Но когда я пытаюсь импортировать css из другого отдельного файла, это не работает. Ниже я упоминаю свои 2 файла.

Layouts.css

 .Content {
    margin-top: 16px;
}

Layouts.js

 import React from 'react';
import Auxillary from './../../hoc/Auxillary'
import classes from './Layouts.css'

const Layout = (props) => (
    <Auxillary>
        <div>
            Toolbar,Sidebar,Backdrop
        </div>
        <main className={classes.Content}>
           {props.children}
        </main>
    </Auxillary>
);
    
export default Layout;

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

1. Как вы создаете свое приложение? Для их использования статические ресурсы (например, css) необходимо запускать через пакет ресурсов, такой как Webpack. В качестве альтернативы вы можете использовать jss или что-то в этом роде

2. Я не думаю, что вам нужен именованный импорт, просто импортируйте ‘./Layouts.css’

Ответ №1:

Вы пробовали создавать className='Content'

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

1. если это сработало для вас, не забудьте отметить это как решение. Вот также источник для решения.

Ответ №2:

Если вы хотите использовать классы.Содержимое вы должны назвать свой CSS-файл макета следующим образом

 Layouts.module.css