как объединить стили

Question

Я думаю, что ошибка в этой части, извините, я новичок, чтобы реагировать

{styles.navbar navbar-default}

это мой код

import styles from './Header.scss';

class Header extends Component {

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

  </nav>
    );
  }
}

введите описание изображения здесь

Answer 1

Итак, у вас есть scss, как показано ниже

export default {
     navbar: "navbar-default"
}

Если вы использовали экспорт named / default из вашего файла scss, вы должны использовать переменные из файла, как показано ниже:

import styles from './Header.scss';

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

Answer 2

Я думаю, что это должно быть

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

Или вы также можете попробовать это. В этом случае второе свойство будет переопределять то же свойство стиля в styles.navbar

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