1.0.0 ā¢ Published 3 years ago
merge-style-modules v1.0.0
A package that merge style modules
Install
yarn add merge-style-modules
How 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
š¤ edusantosbrito
- Website: https://brito.top
- Twitter: @edusantosbrito
- Github: @EduSantosBrito
Show your support
Give a āļø if this project helped you!
š License
Copyright Ā© 2020 edusantosbrito. This project is ISC licensed.
This README was generated with ā¤ļø by readme-md-generator
1.0.0
3 years ago