отреагировать маршрут как импортировать локальный файл s css применимо только к одному js файлу?

Question

В одном приложении React с React Router для каждого компонента маршрута я хотел бы, чтобы один локальный файл css применялся только к этому файлу.

Для приведенного ниже примера, о. js импортирован about.s css, что я хочу получить: about.s css переопределить глобальный стиль в app.s css только в about. js. Тем не менее, он отверг все в приложении

app. js - импортированные приложения.s css, которые я предпочитаю как глобальный стиль

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "./app.scss";  // global scss
import About from "./about";

export default function App() {
  return (
    <>
      <h1>question about scss in react route</h1>
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
          <hr />
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    </>
  );
}
function Home() {
  return (
    <div>
      <h3 className={"myMargin"}>home</h3>
    </div>
  );
}

app.s css (глобальный стиль)

h3.myMargin {
  margin: 10px
}

о. js

import React from "react";
import "./about.scss";

export default function About() {
  return (
    <div>
      <h3 className={"myMargin"}>About</h3>
    </div>
  );
}

about.s css (я хочу быть локальным стилем, однако, он применяется везде в приложении)

h3.myMargin {
  margin: 100px
}

Есть предложения, как структурировать мой код стиля?

Answer 1

Красота (и предостережение) CSS заключается в первом C его аббревиатуры - что означает каскад - это означает, что существует ряд (довольно предсказуемых) правил, которым нужно следовать.

В этом случае about.scss, импортируемый позже, перезапишет ваш h3 из приложения, несмотря ни на что.

1) Использовать контейнер:

import React from "react";
import "./about.scss";

export default function About() {
  return (
    <div className='about-page'>
      <h3 className="myMargin">About</h3> // note: no need for {"myMargin"}
    </div>
  );
}

// about.scss
.about-page {
  h3.myMargin {
    margin: 10px
  }
}

2) Использование CSS Модули:

Другой вариант - использовать CSS Модули , включенные по умолчанию, если вы используете довольно свежую версию create-react-app:

import React from "react";
import styles from "./About.module.scss";

export default function About() {
  return (
    <div>
      <h3 className={styles.myMargin}>About</h3>
    </div>
  );
}

// About.module.scss
.myMargin {
  margin: 10px
}

Это сгенерирует уникальное className, поэтому ваш обработанный код будет выглядеть примерно так:

<div>
  <h3 class='About_myMargin_mVxOd>About</h3>
</div>

Случайное ха sh ( mVxOd в качестве примера) позволит вашим стилям не перезаписывать друг друга.

Есть плюсы и минусы обоих методов, самая большая проблема при использовании обычного импорта CSS / S CSS заключается в том, что вы подчиняетесь правилам CSS: если вы случайно создайте глобальный класс .error, тогда правила будут каскадно относиться к любому компоненту и его Иметь следить. Например, при импорте Bootstrap будет перезаписан целый ряд CSS имен, о которых вы даже не подозреваете (пока не поймете, что CSS выключен).

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

CSS Модули имеют несколько больших недостатков, первый из которых заключается в том, что вы не можете напрямую переопределить стиль из другого файла CSS, просто переопределив его класс CSS (из-за указанного ha sh). Во-вторых, вы не можете получить доступ к вложенным селекторам CSS, разрешенным SASS.

Я лично использовал как для производственных, так и для личных проектов, и оба одинаково хороши - при осторожном использовании.

Существует Третий популярный вариант называется Styled Components. Лично это не мой выбор, и я не очень много его использовал, но вы можете узнать больше об этом на его официальной странице 1036 *. Выглядит это так:

const Title = styled.h3`
  margin: 10px;
`

render() {
  return <Title>About</Title> // creates an h3 tag
}

Последний, CSS в JS, который я тоже недостаточно использовал.