类名在导航(引导)不工作，按钮不工作

Question

我有一个问题。我的纽扣坏了。此外，无论我在className中写什么，按钮都不会移动。即使是用户。IsAuth = true，它仍然是唯一的auth按钮在我的窗口

import React, {useContext} from 'react';
import {Context} from "../index";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import {NavLink} from "react-router-dom";
import {SHOP_ROUTE} from "../utils/consts";
import {Button} from "react-bootstrap";
import {observer} from "mobx-react-lite";
const NavBar = observer(() => {
const {user} = useContext(Context)
console.log(user)
return (
<Navbar bg="dark" variant="dark">
<NavLink style={{color:'white'}} to={SHOP_ROUTE}> ShopUS </NavLink>
{user.IsAuth ?
<Nav className="mr-auto" style={{color:'white'}}>
<Button variant={'outline-light'}>Admin</Button>
<Button variant={'outline-light'} className="ml-2">Exit</Button>
</Nav>
:
<Nav className="mr-auto" style={{color:'white'}}>
<Button variant={'outline-light'} onClick={()=> user.setIsAuth(true)}>Auth</Button>
</Nav>
}
</Navbar>
)
});
export default NavBar;

和UserStore(如果有人需要)

import {makeAutoObservable} from 'mobx'
export default class UserStore{
constructor() {
this._isAuth = true
this._user = {}
makeAutoObservable(this)
}
setIsAuth(bool) {
this._isAuth = bool
}
setUser(user) {
this._user = user
}
get isAuth() {
return this._isAuth 
}
get user() {
return this._user
}
}

Answer 1

你应该使用" mobx-react ";而不是"mobx-react-lite"然后它就会起作用。也可以使用className="ms-2"而不是"ml-2">