Как избежать конфликтов CSS в ReactJs
Я совсем не эксперт в реагировании, но из того, что я мог видеть, если я импортирую некоторые листы css, они будут для всего моего приложения. Если бы я хотел использовать реакцию для многостраничного приложения, как мне определить листы css для каждой страницы?
РЕДАКТИРОВАТЬ
Это моя простая структура
Страница 1
import React, { Component } from "react";
import "./style.css";
export default class Page1 extends Component {
render() {
return (
<div>
<button>with css</button>
</div>
);
}
}
стиль.css [Этот стиль следует применять только к первой странице]
button {
background: green;
}
Страница 2
import React, { Component } from "react";
export default class Page2 extends Component {
render() {
return (
<div>
<button>no css</button>
</div>
);
}
}
Проблема не возникает, если я не импортирую страницу 1 в основной файл, но мне нужно импортировать ее для маршрутизатора.
import React, { Component } from "react";
import Page1 from "./Page1";
import Page2 from "./Page2";
class App extends Component {
render() {
return (
<div classNameName = "App">
<Page2 />
</div>
);
}
}
export default App;
^ Проблема по-прежнему сохраняется, как утверждает OP, потому что каждый стиль, импортированный в любой компонент, доступен глобально и применяется ко всему приложению (по мере добавления css).
Можете ли вы показать, как вы их импортируете? Вы просто включаете их в свой index.html? Вы используете упаковщик? (если да, то какой?) и т. д.
Возможный дубликат Как сделать импорт React CSS компонентным?
Также проверьте эта статья о модульном CSS и эта проблема с ограниченным CSS.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Вот случайное реагирующее приложение:
Что я делаю, так это создаю файлы CSS для своих контейнеров (страниц), а затем импортирую в них:
import './styleForComponent.css'
Стиль применяется к дочернему компоненту и не мешает другим моим страницам, если вам нужен глобальный стиль, который вы можете импортировать, то в index.html, как без React, или импортируйте свой css в свой index.js
если вы импортируете на верхний уровень компонента, например:
import ReactDOM from "react-dom";
import "./yourCSS.css";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
Тогда во всех дочерних компонентах будут видны.
Вы можете проверить наличие стилизованных компонентов или react-jss. Это поможет связать стили, характерные для этого компонента.Стили не будут конфликтовать с другими компонентами
Пример кода react-jss выглядит так
import injectSheet from 'react-jss'
var styles = {
button : {
//styles here
}
}
const Button = ({ classes}) => (
<button className = {classes.myButton}>
Hello
</button>
)
const StyledButton = injectSheet(styles)(Button)
//render it
<StyledButton></StyledButton>
Вы можете использовать module.css или Стилизованные компоненты, чтобы избежать этой ошибки. Вместо использования «./style.css» создайте файл с именем «./style.module.css», это ограничит стили только вашим компонентом. Пример использования -
import React, { Component } from "react";
import styles from "./styles/FlexDemo.module.css";
export default class FlexDemo extends Component {
render() {
return (
<div className = {styles.container}>
<div className = {styles.subContainer}>
<img
src = "https://source.unsplash.com/random"
width = "40%"></img>
<div className = {styles.subText}>
<h1>Flex Box Demo</h1>
<p>
Aliquip ea culpa dolore ut culpa culpa incididunt
minim culpa qui elit veniam ut. Excepteur irure
voluptate amet nisi excepteur non dolore ipsum id
dolor proident mollit nostrud nulla. Duis proident
voluptate quis sit excepteur ut qui mollit. Anim
ullamco nostrud proident amet nulla ut est deserunt
cillum. Ea ex nostrud occaecat consectetur et.
</p>
</div>
</div>
</div>
);
}}
Вот файл css изображение css-файла
Все, что вам нужно, это импортировать стили для всего приложения следующим образом:
import ReactDOM from "react-dom";
import "./TheWholeAppStyle.css";
import App from "./App"; ReactDOM.render(<App />,document.getElementById("root"));
Самый простой способ избежать конфликтов css между страницами на Reactjs — использовать css-модули (это не зависимость), просто изменить имя таблицы стилей вашей страницы с «мой-stylesheet.css» на «моя таблица стилей.module.css» и импортировать ее как «моя таблица стилей.module.css».
вы используете вебпак? в любом случае, импортируйте файл css только в дочерний компонент, а не в корень.