Блог

Как использовать обычный CSS без использования каких-либо модулей или внешних зависимостей, таких как CSS module или styled-components в React, избегая столкновения имен классов или переопределения CSS для других компонентов?

Существует как минимум два способа:

• чтобы охватить его именем класса для определенного компонента:

  .employee-data .warning { ... }

• чтобы охватить его под определенной страницей

  #about-us-page .photo { ... }

Ваш стиль.css

 .button {
  cursor: pointer;
  border: 1px solid #1a202c;
  padding: 8px;
  min-width: 64px;
 
  background: transparent;
 
  transition: all 0.1s ease-in;
}
 
.button:hover {
  background: #1a202c;
  color: #ffffff;
}
 

Ваш App.js

 import React from 'react';
import './style.css';
 
function App() {
  ...
}
 
function Basket({ items, onClick }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.name}
          <button
            type="button"
            className="button"
            onClick={() => onClick(item)}
          >
            {item.isFavorite ? 'Unlike' : 'Like'}
          </button>
        </li>
      ))}
    </ul>
  );
}
 

Функция, которую вы ищете, называется CSS Modules

Примером может быть

 import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}
 

Результат будет таким. Посмотрите хэш в конце classname

 <button class="Button_error_ax7yz">Error Button</button>
 

Если вы используете приложение CRA, я бы рекомендовал CSS Modules Stylesheet, поскольку они встроены в CRA и просты в использовании.

нет никаких проблем, просто обновите имя файла как xyz.module.css и импортируйте

 import styles from './xyz.module.css'; // Import css modules stylesheet as styles

<button className={styles.error}>Error Button</button>
 

Здесь ошибка — это имя вашего класса, такое же, как у обычного CSS.

Теперь у вас может быть то же имя класса, что и ошибка в другом файле css, например abc.module.css, тогда просто

 import styles from './xyz.module.css';
import stylesA from './abc.module.css'; 
<button className={styles.error}>Error Button</button>
<button className={stylesA.error}>Error Button</button>

~~~ xyz.module.css ~~~
.error {
  background-color: red;
}

~~~ abc.module.css ~~~
.error {
  background-color: green;
}
 

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/