Is it possible to use external CSS frameworks like Bootstrap, Semantic UI, or Foundation and still generate base64 class names? This could be achieved if there was a way to apply multiple class names.
Currently, you can only assign one class name like this:
import React, {Component} from 'react';
import style from './App.scss';
import styles from '../semantic/dist/components/button.min.css'
render() {
return (
<div className="App">
<div className={style.button}>Hello Webpack!!!</div>
);
}
}
I require the ability to apply multiple class names like so:
<div className={style.btn} + {style.red}>Hello Webpack!!!</div>Is there a solution that allows me to utilize CSS frameworks and retain the base64 class names for styling?
TL;DR: I want to combine multiple class names from a file without the :local(...) syntax (as seen in Semantic UI) and maintain the base64 random class names when using them. While importing ../semantic/dist/components/button.min.css
enables me to use className="ui red button"
effectively, importing as Semantic from '../semantic/dist/components/button.min.css'
hinders me from utilizing className={Semantic.ui + " " + Semantic.button}
.
../semantic/dist/components/button.min.cssclassName="ui red button"Semantic from '../semantic/dist/components/button.min.css'className={Semantic.ui + " " + Semantic.button}