Блог

Главная - Вопросы по программированию - Как наследовать от css-файла в react

Как наследовать от css-файла в react

#javascript #css #reactjs

#javascript #css #reactjs

Вопрос:

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

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

 render(){
    return(
        <div>
            <div className='smallSectionWrapper'>
                <div className='oneItem'>
                    <h3>Name</h3>
                    <p>John</p>
                </div>
                <div className='oneItem'>
                    <h3>Middle Name</h3>
                    <p>Johny</p>
                </div>
                <div className='oneItem'>
                    <h3>Surname</h3>
                    <p>Johnson</p>
                </div>
            </div>
        </div>
    )
}

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

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

Что я ожидаю отобразить:

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

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

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

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

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

1. Честно говоря, я не вижу никаких проблем! jsfiddle.net/qejx9rwv

2. Как вы импортировали файл scss и где?

3. Я думаю, вам не хватает импорта css в вашем js-файле. импорт «./style.css»;

4. Вы должны импортировать файл SCSS поверх файла javascript. import './styles.scss'

5. Да, это было так, хотя я не вижу, чтобы другие файлы js в этом проекте импортировали файл css.

Ответ №1:

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

 import '<<your scss path>>';

Ответ №2:

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

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

  • установите node-sass (npm i / yarn добавьте node-sass)
  • импортируйте файл scss в правильный файл ИЛИ в тот, для которого компонент будет отображаться как дочерний.

    т.е.

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

const Tester = () => {
    return (
        <div className='smallSectionWrapper'>
            <div className='oneItem'>
                <h3>Name</h3>
                <p>Carl</p>
            </div>
            <div className='oneItem'>
                <h3>Middle Name</h3>
                <p>Johny</p>
            </div>
            <div className='oneItem'>
                <h3>Surname</h3>
                <p>Johnson</p>
            </div>
        </div>
    )
}

export default Tester

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

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

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