React className не работает с s css без предоставления назначенного объекта - PullRequest
Новая
       103

React className не работает с s css без предоставления назначенного объекта

0 голосов
/ 01 августа 2020

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

Сначала я создал новое приложение для реагирования с npx-create-react-app my-app

, которое я установил sass с npm install node-sass --save. Затем через npx generate-react-cli component Prova1 сгенерирован новый компонент.

При вводе js этот компонент уже импортирован как css объект "import styles from import styles from './Prova1.module.scss'

Как видно из кода, только один с className = {styles.containerBlu} будет работать, а другие не будут 

.ProvaObject {

    .containerRed {
        height: 100px;
        width: 100px;
        background-color: red;
    }
    .containerBlu {
        height: 100px;
        width: 100px;
        background-color: blue;
    }
    #containerGreen {
        height: 100px;
        width: 100px;
        background-color: green;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.0/react-dom.min.js"></script>

import React from 'react';
import styles from './Prova1.module.scss';

const ProvaObject = () => (
  <div className={styles.ProvaObject} data-testid="Prova2">
    <div className="containerRed">
      red
    </div>
    <div className={styles.containerBlu}>
      blu
    </div>
    <div id="containerGreen">
      Green
    </div>
    ProvaObject 
  </div>
);
export default ProvaObject;

Здесь ни класс, ни id

, если я создам другой компонент js с его s css без указания объекта, однако ни одно из двух имен классов не будет работать, я хочу изменить через css

Почему? 

    .orange {
        height: 100px;
        width: 100px;
        background-color: orange;
    }

    #olivedrab {
        height: 100px;
        width: 100px;
        background-color: olivedrab;
    }
import React from 'react';
import './prova3.module.scss';

const Prova3 = () => (
  <div>
    <div className="orange">
    orange
    </div>

    <div id="olivedrab">
    olivedrab
    </div>
    Prova3 
  </div>
);

export default Prova3;

Здесь, даже если я не импортирую его как объект, у меня ничего не работает.

Есть ли способ безопасно писать классы с className = "class", который работает, и если бы я хотел поместить такой атрибут, как className = {styles.prova} внутри одного className, могу ли я подключить обычный класс, например className = {styles.prova, "prova2"}?

дерево проекта

Большое спасибо за вашу помощь :)

...