css - 如何使用 classNames 和 JSX 在 reactjs 元素中使用 css 模块设置子项的样式

Question

我正在使用 React JS 建立一个元素，并希望使用 auth0 来处理身份验证(可能还有一些无服务器功能)。

auth0 提供了一个不错的“种子”元素 https://github.com/auth0-samples/auth0-react-sample基本上开箱即用。

主容器的代码使用 JSX 并从模块文件加载 css 样式。模块文件提供用于样式化的 className 类。

我正在使用 React-Bootstrap 组件扩展 Bootstrap 布局，并且能够使用 classNames 语法设置一些组件的样式。

例如，我将 Navbar 的背景颜色设置为这样:

附加到css模块文件/01-Login/src/views/Main/styles.module.css

.mainNavBar{
        background-color: rgb(45, 140, 210);                                                    
        border-color: rgb(45, 140, 210);                                                        
} 

然后到包含JSX的文件01-Login/src/views/Main/Container.js

<Navbar className={styles.mainNavBar} fixedTop>
...
</Navbar>

但是，当我尝试设置其他内部元素的样式时，即文本颜色，

我试过:

.mainMenuItem { 
        color: #fff;
}

和:

 <NavItem className={styles.mainMenuItem} eventKey={1} href="#">Link</NavItem>

这是行不通的。我认为这是因为我不知道如何到达 NavItem 的 child 。

我试过这个和它的变体:

.mainMenuItem ul > li > a { 
        color: #fff;
} 

但这似乎不是正确的方法，而且不起作用(虽然在浏览器上检查时，'li' 元素在某个时候用颜色设置了样式，但不是 'a ' ...)。

最后，我尝试了内联样式(参见相关问题 Add inline style in reactjs without using JSX)，但这似乎遇到了同样的继承问题。

非常感谢你能在我困惑的时候指出正确的方向。

编辑 19/07/2016

看起来 NavItem 没有获取样式元素...

我向 react-bootstrap 提交了一个问题: https://github.com/react-bootstrap/react-bootstrap/issues/2070

Answer 1

我在 Radium 中使用了带有 javascript 语法的内联样式而不是传递带有“Classname”属性的标准 css。