How do I access the div root body from the react? - Html

Omegon
February 26, 2023
254 views
2 votes
5 Answers

I have such a html project structure:


<div id="root">
   <div class="main-c container-fluid>
   </div>
   ...
<div>

My index.tsx:

import './index.css';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
);

app:

import "bootstrap/dist/css/bootstrap.min.css"
function App() { 
return (
    <Container className="main-c" fluid>
       ...
    </Container>
  );
}

And I don’t understand how to access the backgroud-color field from root?

That is, if i open the page elements in the browser, it shows that root has such a body css:

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

And here the background color has the color #fff, and I want to make #fff0. But how to access this field?

i tried:

index.css:

:root{
  background-color: #fff0;
}

But nothing happens. How to access this field?

I have tried all the options below:

body {
  background-color: #fff0;
}

#root{
  background:#fff0;
}

But none of them works. I.e.

color is still white.

Answers

- RyanLe
- February 26, 2023 at 4:10 pm
- 0 votes
0
In React, you can access the root/body div element of your application using the document object. Here’s an example:

Get the root/body element

const rootElement = document.getElementById('root');

// Update the background color of the root/body element

rootElement.style.backgroundColor = 'red';

In the above example, we use the getElementById method of the document object to retrieve the root/body element of the application, and then update its background color to red using the style property.

However, it’s generally not recommended to directly manipulate the DOM in React, as it can lead to unexpected behavior and make your code harder to maintain. Instead, you should use React’s component-based approach and state management to update the UI.

Or using CSS

To select the root/body element in CSS, you can use the body selector:

If you want to target the root div element specifically (which is often used as the root element for React applications), you can use its id selector:

#root { /* your styles here */ }

Login or Signup to reply.

- MarciaMoss
- February 26, 2023 at 4:14 pm
- 0 votes
0
if changing body color is the outcome you are looking for, this would work:

in src/index.css
```
body {
  background-color: #fff0;
}
```
Login or Signup to reply.

- AbbasBagheri
- February 26, 2023 at 4:15 pm
- 0 votes
0
for access an element by id you need # selector on index.css :
```
#root{
   background:#fff0;
}
```
also you can access an element in index.js and change it’s style :
```
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
rootElement.style.background = "#fff0";
```
Edit :

browser always apply last css, for override a bootstrap css style you need to import custom css file after bootstrap file :
```
import "bootstrap/dist/css/bootstrap.min.css";
import "./customCssfile.css";

function App() { 
return (
    <Container className="main-c" fluid>
       ...
    </Container>
  );
}
```
and another option is using of !important,
when you use !important, browser ignore styles that come after it!
Login or Signup to reply.

- Giovanni5454
- February 26, 2023 at 4:19 pm
- 0 votes
0
If you’re trying to access the root div element, there are two solutions you can try.

The first solution is to use another div as the actual root.
```
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div id="theFakeRoot" style={{"background-color":"..."}}>
      {/* Your app code goes here */}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```
The second solution is to store the root div using document.querySelector in a constant variable and share it across your components. This approach is useful if you need to access the root div from multiple components.
```
import React, { useRef, useEffect } from 'react';

export const rootDiv = document.querySelector('#root');

const App = () => {

rootDiv.style.backgroundColor = "...";

  return (
    <>
      {/* Your app code goes here */}
    </>
  );
};

export default App;
```
Login or Signup to reply.