Example

Here is a simple example of how you can use rosebox in your react-app:

import * as React from "react";
import { rgb, px, ms } from "@rosebox/core";
import { createUseStyles, StylesProvider } from "@rosebox/react";
const useStyles = createUseStyles({
titleStyle: {
fontSize: px(48),
transition: ["color", ms(150), "ease-in-out"],
color: "black",
"&query": {
"&:nth-child(2)": {
fontSize: px(32)
},
"&:hover": {
color: rgb(239, 71, 111)
}
}
}
});
const MyComponent = () => {
const classes = useStyles();
return (
<div className="App">
<h1 className={classes.titleStyle}>Hover over me please</h1>
<h1 className={classes.titleStyle}>I come next</h1>
</div>
);
};
export default function App() {
const classes = useStyles();
return (
<StylesProvider>
<MyComponent />
</StylesProvider>
);
}