Radium: Standard bootstrap CSS file?

[bbirand]

I'm trying to wrap my head around Radium, and whether it would make sense for me to transition to it. I currently am maintaining a site that uses the Bootstrap template. I really do not want to write the entire bootstrap codebase using the object notation. I found the css-to-radium project, but converting the bootstrap.css file using that project results in an error.

This made me wonder; am I even going about this in the right way? Given the popularity of Bootstrap, I would have imagined there would be a "Radium-ready Bootstrap" that I can directly import. Is there a better way of doing this?

PS: I found the radium-bootstrap project, but that seems to have a different aim (emulating Bootstrap functionality using React components...).

[AnSavvides]

@bbirand I think it's worth making this distinction, even though it might seem obvious:

• Radium enables you to write inline styles, so it's just a tool to enable you to write your styles in a particular way
• Bootstrap is a set of already existing styles that you can access and make use of by specifying certain classes

As far as I can tell, I think if you need the power of Bootstrap then you should just use bootstrap.css and specify the classes you need within your React components (as you are doing now, I assume). Then the rest of your styles, outside of the realm of Bootstrap, if you wish for them to be inline-only just use Radium.

Here is a simple example where you create a submit button that utilizes Bootstrap (via className="btn btn-primary") but also makes use of Radium for extra styling and hover effects:

"use strict";

import React from "react";
import Radium from "radium";

@Radium
export default class RadiumWithBootstrap extends React.Component {
    render() {
        const style = {
            color: "pink",
            ":hover": {
                color: "yellow"
            }
        };

        return (
            <div>
                <input
                    type="submit"
                    value="Lookup"
                    className="btn btn-primary"
                    style={style}
                />
            </div>
        );
    }
}

[alexlande]

I think @AnSavvides is right on the money here. Radium works very nicely in conjunction with an existing CSS framework. You can write your application-specific styles with Radium without any risk of naming collisions or specificity issues with the framework styles.

[bbirand]

I see, so the usage pattern is to include bootstrap in the root HTML, and to style the components as necessary via Radium. This seems like a fair compromise. The components are not fully self-sufficient, but I guess depending on bootstrap is not that bad. Thank you both for your replies!