Tananing fon rangini qanday o'zgartirish mumkin?

React.js dan foydalanib va ​​butun sahifaning orqa fon rangini o'zgartirishni xohlayman. Buni qanday amalga oshirish kerakligini tushunolmayman. Iltimos yordam bering, rahmat.

Tahrirlash (2-Sentabr): GitHub-da menda bu erda bog'lanadigan loyiham bor. Bu loyiha hozirda onlayn emas, lekin /client papkasida mijoz server. Tekshirib ko'r. Savolga javob berdim.

6

8 javoblar

Eng oddiy yechim biroz xakerlik, lekin siz tananing uslubini o'zgartirish uchun xom javascriptdan foydalanishingiz mumkin:

document.body.style = 'background: red;';
// Or with CSS
document.body.classList.add('background-red');

Yana toza yechim reaktsiya-dubulg'asi yoki next.js Head komponentining .

import React from 'react';
import {Helmet} from 'react-helmet';

class Application extends React.Component {
  render() {
    return (
        <div className="application">
            
                
            
            ...
        </div>
    );
  }
};

Ba'zi css-in-js-da global darajadagi uslublarni boshqarish uchun vositalar mavjud; jihozlangan komponentlar injectGlobal .

Oxir-oqibat, bu bilan ishlashning tozalovchi usullarini ta'minlaydigan ko'plab vositalar mavjud. Lekin uchinchi shaxsga tayanishni xohlamasangiz, u juda interaktiv qilmasangiz, xom JS tanlovi etarlicha yaxshi bo'lishi mumkin.

8
qo'shib qo'ydi
Men reja komponentidan hujjat olishim mumkinmi? Men buni hozirda qilishni xohlayman, lekin hech qanday imkoniyatga ega emasman. hujjati faqat qaytalanmaganligi sababli qaytib keladi
qo'shib qo'ydi muallif Ethan Davis, manba
Nodejs serveridan rezyumelarni taqdim qilyapman. document men uchun noma'lum
qo'shib qo'ydi muallif Ethan Davis, manba
@EthanDavis document brauzerda global o'zgaruvchidir; Siz uni har qanday joydan olishingiz mumkin.
qo'shib qo'ydi muallif Simon Boudrias, manba
@EthanDavis, javobingiz server tomoningizning me'morligiga qanday javob berishi juda aniq. Biroq, xuddi shu kontseptsiya to'g'ri bo'ladi; Reactning <body> yorlig'ini yaratmagani kabi, uni bajarish uchun xom JSdan foydalanishni xohlaysiz.
qo'shib qo'ydi muallif Simon Boudrias, manba
@Ahulreddy yo'q, bu super-toza emas, men 3-tomon plaginlari asosida tayanadigan bir necha tozalovchi variant bilan javobimni yangiladim.
qo'shib qo'ydi muallif Simon Boudrias, manba
Bu toza echimmi? domenni to'g'ridan-to'g'ri reaktsiyadan, komponentni ishlatish uchun ishlatish kerakmi?
qo'shib qo'ydi muallif Rahul, manba
@SimonBoudrias Ha, React-dubulg'ani juda toza va yaxshi yechim sifatida topdim. Javobni siz yangilaganligini ko'rmaganimdan keyin e'lon qildim. Baribir rahmat.
qo'shib qo'ydi muallif Rahul, manba

Hech narsa qilmasdan eng oddiy yechim:

1) ommaviy/index.html faylini oching

2) Add an inline style to your body like this: <body style="background-color: red">

5
qo'shib qo'ydi

React Helmet (https://github.com/nfl/react-helmet)

Albatta, bu kutubxonani juda foydali deb topdim. Haqiqatan ham toza yechimni aytaman.

Namuna foydalanish:

import Helmet from 'react-helmet';


3
qo'shib qo'ydi
Ha, rahmat!
qo'shib qo'ydi muallif Chemaclass, manba

Yuqoridagi echimlar talab qilinadigan funksiyani berish uchun tashqi kutubxonani qo'shish haqida gapirib beradi, lekin buning o'rniga faqat sizning Index.css dosyaningizga o'tishi va allaqachon yozilgan "body" yorlig'i ichida "background-color:" color " bajarildi

2
qo'shib qo'ydi
Ha. Mana shu!
qo'shib qo'ydi muallif Deke, manba

"Wrapper" kabi id bilan bog'lovchi komponenet yarating va keyin rang holatiga ega bo'lgan uslubni yarating:

getInitialState: function() {
  return { color: "white" };//Set your color for initial state.
},

changeColor: function() {
  this.setState({ color: "black" });//Set your changed color.
},

render: function() {
  var style = { backgroundColor: this.state.color };
 //The wrapper (root) component
  return (
    <div id="fullscreen" style={style}>
       change
    </div>
  );
}

Natija shunga o'xshash bo'lishi kerak:

<body>
    <div id="fullscreen" style="background-color: YOUR CUSTOM COLOR">
        
    </div>
</body>
1
qo'shib qo'ydi

Bu savolni berganimdan beri biroz vaqt o'tdi. O'shandan buyon men Facebook-ning create-react-app sozlamasini ishlatib, CSS fayllarini to'g'ridan-to'g'ri tahrirlashni boshladim.

0
qo'shib qo'ydi
bu erda nima qilganingiz haqida ko'proq ma'lumot bera olasizmi?
qo'shib qo'ydi muallif TMin, manba
Bu "Tananing fon rangini qanday o'zgartirish mumkin?" Degan savolga javob bermaydi. Siz faqatgina "boilerplate" ni qanday yaratganingizni va "CSS-fayllarni bevosita tahrir qilmoqchi" deb aytdingiz. Buning uchun siz foydalanadigan CSS-ni tushunmayapman (bir nechta usul bor deb o'ylayman), qanday fayllar, sizning tanangizga qanday murojaat qilishingiz va hokazo. Men umidsizlikka o'xshamaydi deb umid qilaman, javobni juda aniq deb topa olmadi. @Reni'nin javobini foydalanib, ishlash uchun oldim
qo'shib qo'ydi muallif TMin, manba

Men bu bilan birozgina gaplashdim. public/index.html da butunlay intuitiv bo'lmagan men uchun oddiy echim:


sahifaning pastki qismini va ikkinchi yozuvni oladi:

<body style="background-color: red">

Sizga sahifadagi tepaga kiradi. javob kodi.

Bir muammoni hal qilish uchun ikkita yozuv, biroq barcha fayllar yangi liblarga muhtoj va ishlamayapti.

0
qo'shib qo'ydi

Bu men uchun eng qulay echim edi:

// in your CSS file

.background-white {
    background-color: white !important;
}


// in your react component

componentDidMount() {
    document.body.classList.add("background-white");
}

componentWillUnmount() {
    document.body.classList.remove("background-white");
}

ComponentWillMount-dan foydalanish ishonchli ishlamadi. Document.body.style-dan foydalanish ham ishonchli ishlamadi.

0
qo'shib qo'ydi
ReactJS & ReactNative Uzbekistan
ReactJS & ReactNative Uzbekistan
81 ishtirokchilar

Guruh ReactJS va ReactNative bo'yicha muloqot qilish uchun ochilgan. Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @ngTashkent @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs