更改整个react应用程序的背景色



我目前正在创建一个使用react构建的网站,我似乎不知道该把代码放在哪里,以确保应用程序的背景色始终是"bg-ddark"。

它在某些地方起作用,但当某些元素加载/扩展超过滚动限制时,背景会变回白色。

我将如何强制根元素/<body></body>始终具有"#090909";背景而不是白色?

我目前可以通过使用<Component className="bg-dark">手动将每个组件设置为深色背景,但我想在整个站点范围内这样做。

Index.js:

import React from 'react'
import ReactDOM from 'react-dom'
//import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './store/reducers/rootReducer.js'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { reduxFirestore, getFirestore, createFirestoreInstance } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'
import firebaseConfig from './config/firebaseConfig'
import firebase from './config/firebaseConfig'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './assets/app.scss'
const store = createStore(
rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({getFirestore, getFirebase})),
reduxFirestore(firebase, firebaseConfig)
)
);
const rffConfig = {
userProfile: 'users',
useFirestoreForProfile: true,
}
const rrfProps = {
firebase,
config: rffConfig,
dispatch: store.dispatch,
createFirestoreInstance
};
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();

和index.css:

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #090909 !important;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

您可以在CSS文件中使用类似的东西

body {
background-color: #090909;
}

最新更新