css Question posted in
Some basic documentation can be found here.

Css – How to add styling to imported components in react?

I have a component called Nav, which has its own styling. I imported this component in my Landing_Page.js file, and I now want to apply a different styling without disturbing the original css file. I used className in the Nav, tried to add new css properties (position: relative,left:200px). Nothing worked. I changed to inline styling, and there’s no change. Here’s my code-

import Nav from '../../components/nav.js'; import './Landing_Page.css';

export default function Landing_Page(){
    const style1 ={
        postion:'relative', left:'200px'
     }

     return (
          <div className='contain'>
          <Nav style={style1}/>
          <button className='button1'>Become a Host</button>
          <button className='button2'>Search for bikes</button>
         </div>
     )
 }

For some reason the new css rules were being overridden by original Nav css file. I just want to be able to align my Nav component slightly to the left.

Tags:

2

Answers


  1. 0

    You may use !important for your new Nav component’s style but it is generally not recommended because it can lead to maintainability issues. Instead of that you can try wrapping to Nav component with div element like this:

    return (
        <div className='contain'>
            <div style={style1}>
                <Nav />
            </div>
            <button className='button1'>Become a Host</button>
            <button className='button2'>Search for bikes</button>
        </div>
    );

    I hope it works

    Login or Signup to reply.
  2. 0

    You have done the following:

    <Nav style={style1}/>

    This doesn’t work at the Component level. This works at JSX level (to HTML like syntax that we write in React).

    The only way to overRide the styling in your Nav component is by using props to style the Nav component and pass different desired values to the Component.

    I can give an Idea.

    Say Nav is your component and App is the Parent component where you will use the Nav component. You have to design your Nav Component to take CSS values as props.

    function Nav({position, color}) {
   let styles = {
      color,
      position
   }
   return (<nav style={styles}>

     </nav>)
}

    And when you use this Nav Component from the Parent, You pass your desired styles as props (in this example position and color) as below:

    function App(){
   return(
       <section>
         <Nav position="relative" color="teal"/>
       </section>
     )
}

    This is the idea you got to follow to style your Nav Component dynamically and then use it as per your style needs as many times as you wish to.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search