React css in header after import

The reason of duplicated package is that your configurations make TypeScript transpiling files to CommonJS format, and Babel transpiling files to ESModule format, while ‘s has an field which specified different files for different import requests: (Webpack’s documentation on package exports, basically, using will import one file, and using will import another file) (You can use the to debug loader outputs) In order to resolve this issue when you upload the build zip on Cpanel, after extracting the build folder copy all files which are inside the build folder and than move it inside the public_html and now you can see your project working Also, remember to add homepage inside package.

Next.js: Change Div color of header depending on active pgae [duplicate]

In My Next.js project I’ve made a simple Layout.js which contains the following code:

import < Fragment >from "react"; import Header from "./Header/Header"; import Footer from "./Footer/Footer"; function Layout(props) < return (     ); > export default Layout; 

Then I’ve changed the _app.js file to the following:

import Layout from "../components/Layout/Layout"; import "bootstrap/dist/css/bootstrap.min.css"; import "../styles/globals.css"; function MyApp(< Component, pageProps >) < return (  /> ); > export default MyApp; 

So now every page in my website will have the header (and footer).

If I navigate to the results page for example my header will show up as expected:

But I would like to change the color of the div that contains the RESULTS text to be [for example] red.

I know that one way to do it would be to pass the header in each page and pass a prop to it that will indicate which div to change its color. However I’m wondering if there’s a way to achieve that result with my current Layout.js since I don’t want to pass the header to each page.

React Component Not Picking up CSS file, You’ve successfully imported the css file, which is step 1. Step 2 is actually using the styles found within. Just apply a class to your div

The BEST Way To Import CSS Class Names in React

Header style changes depending on tsx or jsx extension

I have this simple function inside app.tsx that renders a table. The header is nicely visible (white on black).

import React from 'react'; import < Table, Thead, Tbody, Tr, Th, Td >from "@chakra-ui/react" export default function App() < return( 
 
 
A
 
B
 
 
 
 
a
 
b
 
 
 
 ) > 

However, if I change the filename instead to app.jsx , the same table will render but with a header that is hard to see:

git clone https://github.com/somguyth/chakra-ui-header-bug.git cd chakra-ui-header-bug npm install npm run dev 

Then open localhost:9000 and change app.jsx to app.tsx and observe how the header color changes once the code recompiles.

The header element when it’s nicely visible ( app.tsx ):

The header element when it is not ( app.jsx ):

EDIT : I was able to sort-of «fix» it by putting > into app.jsx (in addition to index.tsx ). Inspecting the element of the header to see why it was fixed, the class inside the th tag went back to the correct css-4v3u8n , instead of the incorrect css-r10se1 . I don’t know what this means or how to fix it properly (i.e., how to fix it without having to use ChakraProvider twice).

import React from "react"; import ReactDOM from "react-dom"; import < ChakraProvider, extendTheme >from "@chakra-ui/react" import App from "./app" const darkTheme = extendTheme( < config: < useSystemColorMode: false, initialColorMode: "dark" >>); ReactDOM.render( > , document.getElementById("root") ); 

and my module rules in webpack.config.js :

< "name": "test", "version": "1.0.0", "description": "", "scripts": < "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack serve" >, "keywords": [], "author": "", "license": "ISC", "dependencies": < "@chakra-ui/icons": "^1.0.14", "@chakra-ui/react": "^1.6.5", "@emotion/react": "^11.4.0", "@emotion/styled": "^11.3.0", "css-loader": "^5.2.7", "framer-motion": "^4.1.17", "react": "^17.0.2", "react-dom": "^17.0.2", "react-table": "^7.7.0", "typescript": "^4.3.5" >, "devDependencies": < "@babel/core": "^7.14.6", "@babel/preset-env": "^7.14.7", "@babel/preset-react": "^7.14.5", "@types/react-dom": "^17.0.9", "@types/react-table": "^7.7.2", "babel-loader": "^8.2.2", "html-webpack-plugin": "^5.3.2", "ts-loader": "^9.2.3", "webpack": "^5.45.1", "webpack-cli": "^4.7.2", "webpack-dev-server": "^3.11.2" >> 

It happens because there are two versions of @chakra-ui/react package in your bundle, one in cjs format and one in esm . When using React Context, two copies of the same file will create two different React Contexts (it’s same as calling React.createContext in two different files), so the Consumer in one copy can’t get value from Provider in another version.

This can be verified by running npx webpack build —mode production —profile —json=stats.json and loading the stats.json file into Webpack stats analyse tool which can give many internal info about your bundle:

(Webpack stats analyse tool showing there are two versions of @chakra-ui/react package)

The reason of duplicated @chakra-ui/react package is that your configurations make TypeScript transpiling files to CommonJS format, and Babel transpiling files to ESModule format, while @chakra-ui/react ‘s package.json has an exports field which specified different files for different import requests:

// @chakra-ui/react/package.json "exports": < ".": < "require": "./dist/cjs/index.js", "default": "./dist/esm/index.js" >> 

(Webpack’s documentation on package exports, basically, using require will import one file, and using import will import another file)

// Output of src/index.tsx just after ts-loader "use strict"; var __importDefault = (this && this.__importDefault) || function (mod) < return (mod && mod.__esModule) ? mod : < "default": mod >; >; Object.defineProperty(exports, "__esModule", < value: true >); var react_1 = __importDefault(require("react")); var react_dom_1 = __importDefault(require("react-dom")); var react_2 = require("@chakra-ui/react"); var app_1 = __importDefault(require("./app")); var darkTheme = react_2.extendTheme( < config: < useSystemColorMode: false, initialColorMode: "dark" >>); react_dom_1.default.render(react_1.default.createElement(react_2.ChakraProvider, < theme: darkTheme >, react_1.default.createElement(app_1.default, null)), document.getElementById("root")); 

// Output of src/app.jsx just after babel-loader import React from 'react'; import < Table, Thead, Tbody, Tr, Th, Td >from "@chakra-ui/react"; export default function App() < return /*#__PURE__*/React.createElement(Table, < variant: "simple", size: "sm" >, /*#__PURE__*/React.createElement(Thead, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Th, null, "A"), /*#__PURE__*/React.createElement(Th, null, "B"))), /*#__PURE__*/React.createElement(Tbody, null, /*#__PURE__*/React.createElement(Tr, null, /*#__PURE__*/React.createElement(Td, null, "a"), /*#__PURE__*/React.createElement(Td, null, "b")))); > 

(You can use the inspect-loader to debug loader outputs)

To resolve this issue, you can change your tsconfig.json to output ESModule:

Importing css into react js, 4 Answers 4 · rename your file to [FileName].module.css · import it into your project using import importedStyles from ‘./[FileName].module.css

React build page showing only header and footer

I’m trying to build my react app using the command ‘npm run build’ but when I view the index.html file (from build folder) on browser it shows only the header and footer.

Here are the codes from my App.js file:

import React from 'react'; import './App.css'; import Header from './components/Header/Header'; import from 'react-router-dom'; import Home from './components/pages/Home'; import Resume from './components/pages/Resume'; import Contact from './components/pages/Contact'; import Footer from './components/Footer/Footer'; function App() < return (  
   /> /> (window.location = "http://bright-webs.com/portfolio.html")> /> /> 
  ); > export default App; 

I think you are trying to deploy the react build on CPanel and experiencing this issue.

In order to resolve this issue when you upload the build zip on Cpanel, after extracting the build folder copy all files which are inside the build folder and than move it inside the public_html and now you can see your project working

Also, remember to add homepage inside package.json before running build command.

Import CSS in a react app, You can just import the css file like the below in your component. import ‘./header.css’;. Imagine your header.css file looks like .header

Источник

Способы добавления стилей на страницу

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер , как показано в примере 3.1.

Пример 3.1. Подключение связанных стилей

HTML5 CSS 2.1 IE Cr Op Sa Fx

Значение атрибута тега — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега приведено в примере 3.2.

Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера , как показано в примере 3.3.

Пример 3.3. Использование глобального стиля

HTML5 CSS 2.1 IE Cr Op Sa Fx

     H1 
Hello, world!
  

В данном примере задан стиль тега , который затем можно повсеместно использовать на данной веб-странице (рис. 3.1).

Рис. 3.1. Вид заголовка, оформленного с помощью стилей

Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style , а его значением выступает набор стилевых правил (пример 3.4).

Пример 3.4. Использование внутреннего стиля

HTML5 CSS 2.1 IE Cr Op Sa Fx

      
Пример текста
  

В данном примере стиль тега

задаётся с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).

Рис. 3.2. Использование внутренних стилей для изменения вида текста

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

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

Пример 3.5. Сочетание разных методов

HTML5 CSS 2.1 IE Cr Op Sa Fx

     H1 
Заголовок 1
 
Заголовок 2
  

В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3).

Рис. 3.3. Результат применения стилей

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import . Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей; @import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.

HTML5 CSS 2.1 IE Cr Op Sa Fx

     @import url("style/header.css"); H1 
Заголовок 1
 
Заголовок 2
  

В данном примере показано подключение файла header.css , который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 3.7).

Пример 3.7. Импорт в таблице связанных стилей

@import "/style/print.css"; @import "/style/palm.css"; BODY

В данном примере показано содержимое файла mysite.css , который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега .

Вопросы для проверки

1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего?

1. Связанные стили.
2. Глобальные стили.
3. Блочные стили.
4. Внутренние стили.
5. Экспорт стиля.

2. В данном примере, какой цвет будет у текста на веб-странице?

     HTML < color: black; >BODY < color: red; >P 
Текст
  

3. Какой HTML-код применяется для подключения внешнего CSS-файла?

4. Какой атрибут используется для определения внутреннего стиля?

Источник