Question

我认为错误在于这部分，抱歉，我是新来的人

{styles.navbar navbar-default}

这是我的代码

import styles from './Header.scss';

class Header extends Component {

render() { return (
  <nav className={styles.navbar navbar-default}>

  </nav>
    );
  }
}

enter image description here

Answer 1

我认为必须是

<nav className={styles.navbar,styles.navbar-default}></nav>

或者您也可以尝试此操作。在这种情况下，第二个属性将覆盖styles.navbar

中的相同样式属性

<nav className=style={Object.assign({}, styles.navbar, styles.navbar-default)}></nav>

Answer 2

所以您有一个如下所示的

export default {
     navbar: "navbar-default"
}

假设您已使用scss文件中的命名/默认导出，则必须使用文件中的变量，如下所示：

import styles from './Header.scss';

class Header extends Component {
render() { return (
  <nav className={styles.navbar}>
  </nav>
    );
  }
}

如何连接样式

2 个答案: