В настоящее время я изучаю ReactJS из учебника на YouTube и пытаюсь использовать className, чтобы страница выглядела лучше. Учебник, за которым я следую, только добавил: className="card"> в открывающем теге элемента div, и это изменило внешний вид страницы, хотя, похоже, у меня это не работает. Простите меня, если это глупый вопрос, поскольку я не знаю, нужно ли вам импортировать собственные файлы css для изменения внешнего вида, а в учебнике это просто не показано. Буду признателен за любые ответы. Спасибо.

0
Airlo 11 Окт 2021 в 23:31

2 ответа

Лучший ответ

Вам нужно узнать о CSS (каскадные таблицы стилей) (: элементам HTML можно присвоить классы, подобные этому

<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">content</div>
</body>
</html>

И если у вас есть таблица стилей (файл с расширением .css, включенный в <head> вашего документа

/* styles.css */ 
.card {
    background-color: red;
}

Стили, описанные в разделе класса .card, будут применены к вашему элементу html (в данном случае красный фон)

Вероятно, вы пропустили шаг в своем руководстве о включении предварительно созданной таблицы стилей.

Основы CSS

0
nlta 11 Окт 2021 в 20:36

Ответ обновлен после этого комментарий:

Причина этого в том, что css импортируется в компонент, расположенный выше того, в котором он объявил этот код.

Пример кода:

/* App JS */
import './App.css';
import Title from './Title.jsx';

function App() {
  return (
    <div className="App">
      <Title />
    </div>
  );
}

export default App;
/* App.css */
.App{
  font-size: 14px;
}
.title {
  color: #e60000;
  font-size: 20px;
  text-decoration: underline;
}
/* Title.jsx */
export default function (){
    return <div className="title">Test</div>
}
0
Telmo Dias 11 Окт 2021 в 20:57