Question 44833 in Html Question posted in
Some basic documentation can be found here.

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

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?

enter image description here

I have tried all the options below:

body {
  background-color: #fff0;
}

#root{
  background:#fff0;
}

But none of them works. I.e.

enter image description here

color is still white.

Tags:

5

Answers


  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 0

    Try this:

    div#root{
   background:#fff0 !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search