как сделать таблицу CSS для работы в reactjs, если компоненты находятся в отдельной папке компонента
Как заставить таблицу стилей index.css работать. У меня есть все мои компоненты в папке компонентов внутри src, и она отлично работает, но index.css не работает. Здесь перечислены все разные файлы: index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/app';
ReactDOM.render(<App />, document.getElementById('root'));
Внутренние компоненты app.js
import React, { Component } from 'react';
import App1 from './app1';
class App extends Component {
render() {
return (
<div >
<App1/>
<App1/>
</div>
);
}
}
export default App;
и папка app1.js внутри компонентов
import React, { Component } from 'react';
class App1 extends Component {
render() {
return (
<div >
<h1> hello </h1>
</div>
);
}
}
export default App1;
и index.css
.h1{
font: italic;
color: red;
}
В моем app1.js я создаю простой заголовок, но css не вступает в действие.
Ответ Grzegorz должен решить проблему, но я хотел расширить, почему.
Файл index.css содержит имя класса.h1. Чтобы применить его к элементу HTML, нужно добавить класс к элементу.
app1.js:
<h1 className='h1'> hello </h1>
Это то же самое, что и обычный старый HTML/CSS. Однако обратите внимание, что вам нужно использовать "className" вместо "class" в реакции. Атрибуты HTML - это верблюд-футляр в jsx. А класс - это зарезервированное слово.
Если вы хотите переопределить базовый стиль элемента h1, вам нужно удалить. (Точка).
index.css
h1 {
font: italic;
color: red;
}
Попробуй это:
h1 {
font: italic;
color: red;
}