React Tsx 与 React Bootstrap - Active NavItem 的内联 CSS

Question

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

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. You have to use css for that e.g. 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 Tsx 与 React Bootstrap - Active NavItem 的内联 CSS

React Tsx with React Bootstrap - Inline CSS for Active NavItem

css

twitter-bootstrap

typescript

reactjs

react-bootstrap