куда поместить css reset в директории проекта React - PullRequest
Новая
       1

куда поместить css reset в директории проекта React

0 голосов
/ 08 мая 2020

Хотите запустить приложение create-react-app (в vscode). Я хотел бы начать чистку, используя какой-нибудь базовый c css код сброса.

Вопрос: где лучше всего сбросить css сброс в проекте? 

option a) in the `index.css` file auto generated via `create-react-app`

option b) in the `App.css` file auto generated via `create-react-app`

option c) any other best practice and/or recommendation

Чтобы уточнить, index.css и App.css по умолчанию находятся в одном каталоге.

и ..

App.js укоренены в index.js 

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

документы говорят, что сбросить в index.css. Я просто хочу быть уверенным, что index.css «каскадирует» правильно до App.css с учетом этой структуры.

Ответы [ 3 ]

0 голосов
/ 08 мая 2020

В моем приложении для реагирования я обычно поддерживаю папку темы и файл с именем global-styles. css. Я использую файл app / theme / global-styles. css для глобального / css кода сброса.

0 голосов
/ 08 мая 2020

basi c css reset может быть внутри index. css. Это перезапишет все стили просмотра по умолчанию как index. html - это файл точки входа. Тогда css, которое вы напишете в каждом компоненте, будет каскадировать поверх этого стиля.

В конечном итоге, как каскадный эффект, вы переопределяете стили браузера по умолчанию и добавляете стили компонентов.

0 голосов
/ 08 мая 2020

Вот что рекомендуют официальные документы Create-React-App. https://create-react-app.dev/docs/adding-css-reset/

В этой настройке проекта используется Post CSS Normalize для добавления CSS Reset.

Чтобы начать использовать, добавьте @ import-normalize; в любом месте вашего файла (ов) CSS. Вам нужно включить его только один раз, и дублирующийся импорт автоматически удаляется. Поскольку вам нужно включить его только один раз, хорошее место для добавления - index. css или App. css. 

#index.css
@import-normalize; /* bring in normalize.css styles */
/* rest of app styles */

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

Похоже, что вариант B будет лучшим маршрутом.

...