Я считаю, что это очень просто, но я не могу найти решение. Я не могу унаследовать мои классы css в моем js-файле.

Это моя функция рендеринга из js-файла:

render(){
    return(
        

Name

John

Middle Name

Johny

Surname

Johnson

) }

Это мой scss файл:

.oneItem {
  width: 300px;
}
.smallSectionWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

Что я ожидаю получить в результате:

введите описание изображения здесь

Что я на самом деле делаю:

введите описание изображения здесь

После проверки оказывается, что классы наследуются, но без свойств, упомянутых в классе. Я довольно новичок в React, поэтому возможно, что я пропустил какой-то шаг?

Vasko Vasilev

Ответов: 2

Ответы (2)

Вам не хватает импорта в файле .js:

import '<>';

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

относительно стилизации: Если вы используете SCSS в своем приложении react, убедитесь, что вы:

  • установите node-sass (npm i/yarn add node-sass)

  • импортируйте scss-файл в нужный файл ИЛИ в файл, дочерним по отношению к которому будет отображаться компонент.

    и.е.

import React from 'react'
import './App.scss';

const Tester = () => {
    return (
        

Name

Carl

Middle Name

Johny

Surname

Johnson

) } export default Tester

Также рассмотрите возможность использования вложенных SCSS для конкретизации

.smallSectionWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .oneItem {
    width: 300px;
  }
}

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

2022 WebDevInsider