как сделать таблицу CSS для работы в reactjs, если компоненты находятся в отдельной папке компонента

57
6

Как заставить таблицу стилей 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 не вступает в действие.

спросил(а) 2018-01-27T22:40:00+03:00 2 года, 7 месяцев назад
1
Решение
124

Ответ 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;
}

ответил(а) 2018-01-28T03:59:00+03:00 2 года, 7 месяцев назад
40

Попробуй это:


h1 {
font: italic;
color: red;
}

ответил(а) 2018-01-28T00:07:00+03:00 2 года, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема