JSS theme + functional props http://cssinjs.org/react-jss/?v=v8.4.0#theming

Root.js

import React, { Component } from 'react';
import { Router, Switch, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Provider } from 'mobx-react';
import { ThemeProvider } from 'react-jss';
import PropTypes from 'prop-types';

// Stores
import Root from 'stores/RootStore';

// Scenes
import Layout from '../Layout';
import SingUp from '../SingUp';
import SingIn from '../SingIn';
import Properties from '../Properties';
import Modules from '../Modules';
import Hosts from '../Hosts';
import Amenities from '../Amenities';

const browserHistory = createBrowserHistory();


const RootStore = new Root();

const unlisten = browserHistory.listen((location) => {
  RootStore.RouterStore.setCurrentRoute(location.pathname);
});

const AnimatedRoute = ({ path, component : Component }) => (
  <Route path={path}>
    {({ match, ...rest }) => match && <Component {...rest} />}
  </Route>
)

AnimatedRoute.propTypes = {
  path : PropTypes.string,
  component : PropTypes.func,
}

class RootContainer extends Component {
  componentWillUnmount() {
    unlisten();
  }

  render() {
    return (
      <Provider store={RootStore}>
        <ThemeProvider theme={RootStore.ThemeStore.theme}>
        <Router basename="/" history={browserHistory}>
          <Layout>
              <Switch>
              <AnimatedRoute exact path="/" component={Properties} />
                <AnimatedRoute
                    path="/inicio"
                    component={SingIn} />
                <AnimatedRoute
                    path="/registro"
                    component={SingUp} />
                <AnimatedRoute
                    path="/propiedades"
                    component={Properties} />
                <AnimatedRoute
                    path="/modulos"
                    component={Modules} />
                <AnimatedRoute
                    path="/residentes"
                    component={Hosts} />
                <AnimatedRoute
                    path="/amenidades"
                    component={Amenities} />
                </Switch>
              </Layout>
            </Router>
        </ThemeProvider>
      </Provider>
    );
  }
}

export default RootContainer;

Scene.js

import React, { Component } from 'react';
import injectSheet, { withTheme } from 'react-jss';
import PropTypes from 'prop-types';
import { observer, inject } from 'mobx-react';

// Components
import { Toolbar, Modal, Datagrid, IconButton } from 'components';
import { Delete } from 'components/Icons';
import { AddRenter } from 'components/Forms';
import AnimatedWrapper from '../AnimatedWrapper';

// Styles
import Styles from './styles';

@inject('store')
@observer
class HostsComponent extends Component {
  constructor(props) {
    super(props);
    this.elements = [];
  }

  extractRef = (ref) => {
    this.elements.push(ref);
  }

  toggleNewModuleModal = () => { this.props.store.UIStore.toggleModal('addModule') }

  deleteHandler = (item) => item;

  renderActions = (item) => {
    const StyledDeleteIcon = withTheme(({ theme }) => <Delete color={theme.colors.delete} />);
    return (
      <IconButton color="white" clickHandler={this.deleteHandler.bind(this, item)}> <StyledDeleteIcon /> </IconButton>
    );
  };

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.container}>
        <Modal active={this.props.store.UIStore.modals.addModule.on}>
          <AddRenter closeHandler={this.toggleNewModuleModal} />
        </Modal>
        <Toolbar {...{
          title: 'Residentes',
          leyend: 'Listado de todos los residentes',
          actionLabel: 'agregar',
          actionHandler: this.toggleNewModuleModal,
        }} />
        <div className={classes.wrapper}>
        <div className={classes.content}>
          <Datagrid
            data={this.props.store.HostsStore.users}
            columns={this.props.store.UIStore.hostTableColumns}
            upperCell={false}
            Actions={this.renderActions} />
        </div>
        </div>
      </div>
    );
  }
}

// Types
const propTypes = {
  store: PropTypes.object,
  classes: PropTypes.object,
};

HostsComponent.propTypes = propTypes;

const Properties = AnimatedWrapper(HostsComponent);

export default injectSheet(Styles)(Properties);

styles.js

import { flex } from 'helpers/theme';

export default ({ colors, fonts }) => ({
  container: {
    ...flex('center', 'flex-start', 'row'),
    width: 263,
    marginBottom: 10,
    borderRadius: 5,
    overflow: 'hidden',
    border: `2px solid ${colors.inputBorder}`,
    background: 'white',
    cursor: 'pointer',
  },
  imageContainer: {
    width: 85,
    height: 82,
    marginRight: 12,
  },
  leftPanel: {
    ...flex('center', 'flex-start', 'row'),
  },
  name: {
    ...fonts.light,
    fontSize: 15,
    color: ({ active }) => active ? 'white' : colors.inputLabel,
  },
  moduleValue: {
    marginRight: 13,
    ...fonts.regular,
    fontSize: 15,
    color: ({ active }) => active ? 'white' : colors.primary,
  },
  moduleLabel: {
    ...fonts.light,
    fontSize: 14,
    color: ({ active }) => active ? 'white' : colors.inputLabel,
  },
});

ThemeStore.js

import { observable, useStrict } from 'mobx';

useStrict(true);

class ThemeStore {
  constructor(rootStore) {
    this.rootStore = rootStore
  }

  @observable theme = {
    colors : {
      white                : '#FFFFFF',
      separator            : '#E7E9EA',
      primary              : '#0F9BF9',
      primaryShadow        : 'rgba(15, 155, 249, 0.20)',
      cta                  : '#FF526B',
      ctaShadow            : 'rgba(255, 82, 107, 0.20)',
      primaryHover         : '#F3FFFC',
      headingText          : '#161B1E',
      tagLineDark          : '#3F5F8A',
      inputBorder          : '#EAEBF0',
      placeholder          : '#43628F',
      sceneBackgound       : '#43628F',
      text                 : '#34343F',
      cardName             : '#89A6C9',
      cardAddress          : '#D2D2D2',
      cardBorder           : '#E9EFF4',
      modalback            : '#F8FAFB',
      formContainerShadows : 'rgba(227, 229, 242, 1)',
      inputLabel           : '#8EA6C6',
      delete               : '#FF566A',
      containerShadows     : '0 0 20px 1px rgba(0,0,0,0.1)',
    },
    queries : {
      desktopS : '@media only screen and (max-width : 1024px)',
      mobileXL : '@media only screen and (max-device-width : 768px)',
      mobileS  : '@media only screen and (max-device-width : 365px)',
    },
    fonts : {
      light   : { 'font-family' : 'Lato, sans-serif', fontWeight : 300 },
      regular : { 'font-family' : 'Lato, sans-serif', fontWeight : 400 },
      bold    : { 'font-family' : 'Lato, sans-serif', fontWeight : 700 },
    }
  };
}

export default ThemeStore;