React Tsx with React Bootstrap - Inline CSS for Active NavIt

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的样式。看这里。您必须为此使用 css，例如在 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>