Свяжите CSS-файл с компонентом в ReactJs, например, Angular 2+ - PullRequest
Новая
       39

Свяжите CSS-файл с компонентом в ReactJs, например, Angular 2+

0 голосов
/ 24 января 2019

В Angular 2+ у нас есть директива @component, в которой мы можем передать элемент-селектор, файл CSS, файл шаблона HTML, ... Мы делаем это по следующему фрагменту. 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

В Angular 2+ стили CSS являются локальными только для этого элемента HomeComponent. Поэтому я могу добавлять разные стили к разным компонентам, не влияя друг на друга.

AngularLayout.html 

<section>
    <app-home></app-home>
    <app-about></app-about>
    <app-contact></app-contact>
</section>

Для ReactJ я пытался добавить стили к различным компонентам, например,

LayoutHome.js 

import React, { Component } from 'react';
import './LayoutHome.css';

class LayoutHome extends Component {
    render() { return <span>home</span>; }
}

export default LayoutHome;

LayoutAbout.js 

import React, { Component } from 'react';
import './LayoutAbout.css';

class LayoutAbout extends Component {
    render() { return <span>about</span>; }
}

export default LayoutAbout;

ReactLayoutApp.js 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import LayoutHome from './components/LayoutHome';
import LayoutAbout from './components/LayoutAbout';

class App extends Component {
  render() {
    return (
      <section>
        <LayoutHome/>
        <LayoutAbout />
      </section>
    );
  }
}

export default App;

Например, пусть './LayoutAbout.css' имеет следующий 

span {
   color: blue;
}

'. / LayoutHome.css' будет иметь следующий 

span {
   color: red;
}

Стили CSS сворачиваются друг с другом.

Каким может быть более чистый способ пометки CSS-файла локальным компонентом в ReactJs?

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Один из способов решения этой проблемы заключается в том, чтобы быть более конкретным в своем CSS, чтобы избежать конфликтов, предоставив класс или идентификатор внешнему элементу в вашем компоненте и вложив в них все необходимые стили для этого компонента, например:

LayoutAbout.js 

import React, { Component } from 'react';
import './LayoutAbout.css';

class LayoutAbout extends Component {
    render() {
        return (
            <span id="about">
                about
                <span>nested content</span>
            </span>
        );
    }
}

export default LayoutAbout;

LayoutAbout.css 

#about {
    color: blue;
}

#about span {
    color: dodgerblue;
}

Еще одна альтернатива - воспользоваться shadow dom , который будет инкапсулировать ваши стили в ваш пользовательский компонент. Это гарантирует, что CSS в вашем компоненте не повлияет на что-либо извне, и что вам нужно быть явным, чтобы повлиять на любые элементы в теневом домене вашего пользовательского компонента.

0 голосов
/ 24 января 2019

Возможно, вам следует просто добавить еще несколько CSS-селекторов.Например, ваш LayoutAbout.css будет выглядеть как 

.about span {
   color: red;
}

, а ваш LayoutHome.css 

.home span {
    color: blue;
}
...