component.js

import React from 'react';
import 'style.scss';

const NavButton = (props) => <div className='container'><div classname={`nav-btn ${props.active}`}><i>Click Me</i></div><div>

export default NavButton;

style.scss

$brand-color: red;

.nav-btn {
  border: 1px solid black;
  border-radius: 5px;
  background: white;
  &.true {
      background: $brand-color;
  }
}
.container {
  ...
}

Styled Components

NavButton.js

import React from 'react';
import styled, { css } from 'styled-components';

export const NavButton = ({ children, ...props }) => <Container><Button {...props}><i>{children}</i></Button></Container>;

const Container = styled.div`
    ... 
`;


const Button = styled.div`
  border: 1px solid black;
  border-radius: 5px;
  background: white;
  ${props => props.active && css`
    background: ${props.theme.brandColor};
  `}
`;

Usage:

render() {
  return (
    <NavButton active={true}>Cool</NavButton>
  )
}

<div className={`nav-btn ${props.active}`}></div>

{props.avtive?<div className='nav-btn true'></div>:<div className='navbar-btn'></div>}

<div className={props.active ? 'nav-btn true': 'navbar-btn'}></div>

CSS-Modules

NavButton.js

import React from 'react';
import cx from 'classnames';
import s from './styles.css';

const NavButton = ({ active, className, ...props }) => <div className={cx(className, s.nbtn, active && s.active)} {...props} />

styles.css

@value brand-color: red;

.nbtn {
  border: 1px solid black;
  border-radius: 5px;
  background: white;
}
.active {
  background: $brand-color;
}

JSS

NavButton.js

import React from 'react';
import cx from 'classnames';
import { withStyles } from '@material-ui/core';
import styles from './styles.js';

const NavButton = withStyles(styles)(({ active, classes, className, ...props }) => (
  <div className={cx(className, classes.nbtn, { [classes.active]: active })} {...props} />
))

styles.js

const styles = (theme) => ({
  active: {
    background: theme.brandColor,
  },
  nbtn: {
    border: '1px solid black',
    borderRadius: 5,
    background: 'white',
  }
});
export default styles;