How do you manage integrating Bootstrap with inline styles using aphrodite?

[kennetpostigo]

No description provided.

[kentcdodds]

If you're using a CSS framework like Bootstrap, then things don't really change from the perspective of how you utilize the framework. The only thing that's different is how you do your extra styles with your own components.

I've created an example to show you what I mean: https://jsbin.com/lesehu/edit?js,output

Let me know if you have any questions!

[kentcdodds]

Here's a gif:

[kennetpostigo]

@kentcdodds, awesome thanks!

[kentcdodds]

For some reason the jsbin takes a while to load. Here's a codepen: http://codepen.io/kentcdodds/pen/xOxxGb/

[yantakus]

Hi, @kentcdodds. Is there a way to import bootstrap's variables and use them in a component with aphrodite? That would be very useful. Converting them from sass to js manually isn't fast and easy. May be there's a solution I don't know?

[kentcdodds]

Unfortunately not, though you may be able to use some kind of parser to get them for a one-time conversion to make that easier

[MaxwellGover]

I'm using React but the following doesn't seem to work for me when trying to style the button.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, css } from 'aphrodite';

const DashNavBar = props => {
  return (
    <nav>
      <a className="navbar-brand" href="#">App</a>
      <button className="btn btn-default ${css(styles.button)}">Maxwell Gover</button>
    </nav>  
  ); 
};

DashNavBar.propTypes = {
  // Add props
};

const styles = StyleSheet.create({
  nav: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'green',
    paddingTop: 5,
    paddingBottom: 5
  },
  button: {
    backgroundColor: 'blue',
    cursor: 'pointer',
    borderRadius: 3,
    padding: 15
  }  
});

[14850842]

@MaxwellGover <button className={`btn btn-default ${css(styles.button)}`>Maxwell Gover</button>