Question

我想使用内联CSS将active NavItem元素的背景颜色更改为绿色。我正在使用TypeScript 2.2，React，React Bootstrap，React Router Dom和React Router Bootstrap。这是可能的还是我需要创建一个CSS类？

https://react-bootstrap.github.io/components.html#navigation

当前代码：

const tabStyle: React.CSSProperties = {
    backgroundColor: 'green'
}

return (
    <main>
        <div>
            <Nav bsStyle="tabs" activeKey="1">
                <LinkContainer to="/about">
                    <NavItem eventKey="1">Om</NavItem>
                </LinkContainer>
                <LinkContainer to="/facts">
                    <NavItem eventKey="2">Fakta</NavItem>
                </LinkContainer>
            </Nav>
        </div>
    </main>
);

Answer 1

就我所见，你并没有使用道具，而且道具是不可改变的。您可能需要查看state并将其用作backGroundColor，但对于内联样式，它可能看起来像这样

 <div style={{color: condition ? "red": "green"}}> </div>

编辑：似乎没有针对NavItem的样式。见here。你必须使用css，例如Change the <a> element class in react-bootstrap NavItem

Answer 2

解决这个问题，不是最漂亮的解决方案，但工作正常。

const css = `
    .route-list .nav-tabs>li.active>a {
        background-color: green;
        color: white;
    }
`

<main>
    <div className="route-list">
        <style>{css}</style>
        <Nav bsStyle="tabs" activeKey="1">
            <LinkContainer to="/about">
                <NavItem eventKey="1">Om</NavItem>
            </LinkContainer>
            <LinkContainer to="/facts">
                <NavItem eventKey="2">Fakta</NavItem>
            </LinkContainer>
        </Nav>
    </div>
</main>

使用React Bootstrap实现Tsx - Active NavItem的内联CSS

2 个答案: