css - 使用 React Bootstrap react Tsx - 用于事件 NavItem 的内联 CSS

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

据我所知，您没有使用 Prop ，而且 Prop 是不可变的。您可能想查看 state 并将其用作 backGroundColor 但对于内联样式，它可能看起来像这样

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

编辑:似乎没有用于 NavItem 的样式。参见 here .你必须为此使用 css，例如Change the <a> element class in react-bootstrap NavItem