Skip to main content
Version: Next


HoC or Higher-Order Components can be used if you are still using Class Components. This function will add props called apply that can be used for styling.


import { withStyles } from "osmicsx";

class Button extends React.Component {
render() {
const { apply } = this.props;

return (
style={apply("py-2 px-5 rounded-lg bg-blue-500")}
<Text style={apply("text-sm font-semibold text-white")}>Click Me</Text>

export default withStyles(Button);

Return Type

apply(...args: string[]) => anyreturn an object styles or string (if only apply color-name)
switchTheme(mode: keyof typeof ThemeMode) => voidmode can be dark, light, or system
scaleWidth(width: number) => numberreturn width in number depends on screen resolution
scaleHeight(height: number) => numberreturn height in number depends on screen resolution