modifie style base on state with styled component-CodePudding

I have a function component as such

const Navbar = ({setNav, nav}) => {
  const [justify, setJustify] = useState('space-around')
  //get localStorage
  const user = JSON.parse(localStorage.getItem('user'));


  //change state of nav to display user details
  if(user){
    setNav(true)
  }
  console.log(nav)



  return (
    <Nav>
      <Img src={logo} alt='groupomania' />
      {nav  ? <UserDetail setNav={setNav}/> : ''}
    </Nav>
  );
};

I would like to modify the justify-content styling based on the state

I have tried the following without success

const Nav = styled.nav`
  position: sticky;
  background: #eeeeee;
  min-height: 10vh;
  display: flex;
  flex-direction: row;
  justify-content: ${nav  ? 'space-between' : 'space-around'};
  align-items: center;
  border-bottom: solid 1px #e5e5e5;
  padding: 1rem 10rem;
  top: 0px;
`

CodePudding user response：

What if you just directly put that clause inline.

<Nav style={{ 'justify-content': nav ? 'space-between' : 'space-around' }}>
  ... ...
</Nav>