Проблема с несколькими таблицами стилей при использовании React - PullRequest
Новая
       53

Проблема с несколькими таблицами стилей при использовании React

0 голосов
/ 09 апреля 2020

Я новичок, чтобы реагировать, у меня есть вопрос о том, как сохранить таблицы стилей в реакции. Например: Если у меня есть структуры блоков в разных компонентах с одинаковыми именами классов , которые импортируются в Page-A & Page-B , Я поддерживал разные таблицы стилей и добавлял их на соответствующие страницы. Если я изменю свойства стиля для Page-B в соответствующей таблице стилей, используя то же имя класса, изменения будут отражены как в Page-A & Page-B страницы, которые должны отображаться только в Page-B . Пожалуйста, помогите решить эту проблему.

Page-A <div class="wrapper">Headline<div> .wrapper{background:red; width:200px; height:200px;} Page-B <div class="wrapper">Headline<div> .wrapper{background:black; width:400px; height:400px;}

import React, { Component } from 'react';
import NavbarafterLogin from './NavigationBar/navbarafterlogin';
import '../../Css/afterlogins.css';

class Home extends Component {   
render() {
    return (            
        <div class="col-sm-12 col-xs-12">
            <NavbarafterLogin/>
            <div class="body-wrapper">
                <div class="container">                        
                    <ViewProfile/>
                </div>
            </div>
        </div>
    )
}
}
 export default Home;


import React, { Component } from 'react'
import NavbarBeforeLogin from './NavigationBar/navbarbeforelogin';
import '../../Css/beforelogins.css';

class Index extends Component {
render() {
    return (
        <div class="col-sm-12 col-xs-12">
            <NavbarBeforeLogin />
            <div class="body-wrapper clearfix">
                <div class="col-sm-12 col-xs-12">
                    <div class="banner-sec">
                        <div class="jumbotron">
                            <div class="container">
                                <h1>Submit <strong>Profile</strong></h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
}
 export default Index;
...