Welcome to merge-style-modules 👋
A package that merge style modules
Install
yarn add merge-style-modulesHow to use
Sometimes you want to use more than one file with SASS/CSS modules like that:
/* @styles/default.modules.scss */
.container {
background-color: red;
}/* @styles/component.modules.scss */
.container {
display: flex;
justify-content: center;
align-items: center;
}import defaultStyle from "@styles/default.modules.scss";
import componentStyle from "@styles/component.modules.scss";
import { useMemo } from "react";
const Component = () => {
// You can't just merge these objects because of property conflicts
const styles = useMemo(() => ({ ...defaultStyle, ...componentStyle }), []);
return <div className={styles.container}>test</div>;
};So I've created this package :)
Now you just have to do that:
import defaultStyle from "@styles/default.modules.scss";
import componentStyle from "@styles/component.modules.scss";
import { mergeStyles } from "merge-style-modules";
import { useMemo } from "react";
const Component = () => {
const styles = useMemo(() => mergeStyles(defaultStyle, componentStyle), []);
return <div className={styles.container}>test</div>;
};Author
- Website: https://brito.top
- Twitter: @edusantosbrito
- Github: @EduSantosBrito
Show your support
Give a
📝 License
Copyright © 2020 edusantosbrito.
This project is ISC licensed.
This README was generated with