
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
material-ui-sass
Advanced tools
This is the Sass counterpart of the material-ui React/CSS framework, which originally uses Less for the styles.
Working with material-ui v0.7.5.
npm install material-ui-sass
In your SCSS file you need to import directly from node_modules
:
// when style.scss is in your project's root
@import "./node_modules/material-ui-sass/material-ui";
/* Your style here */
h1 { text-decoration: blink; }
If you don't want to dig into node_modules
in your .scss files, you can download the sources:
material-ui/main
into your main .scss
file:@import "material-ui/main";
/* Your style here */
h1 { text-decoration: blink; }
The Sass files work with the original material-ui React components.
You can customize the default values overriding those in _custom-variables.scss. Include them before importing material-ui:
@import "my-custom-variables";
@import "material-ui/main";
/* Your style here */
You must use autoprefixer when compiling your own CSS. The gulp sass task is an example on how to do it.
Material-ui includes a set of typography classes that you can use with SASS @extend
in your own CSS:
.my-custom-headline {
@extend %mui-font-style-headline;
}
The original version included a set of HTML tags: h1
, h2
... h6
, p
and hr
. Those definitions are moved in _html.scss, which is not imported by default. You need to import that file manually if you still need them.
I will try to keep the two frameworks in sync, but you can also help :-) If you find bugs or idea for improvements, feel free to add a new issue.
If you'd like to send pull requests, please try to adopt the current styles and conventions. For now, they need to be close to the original less code.
When converting to Sass, I've found the material-ui docs site useful to preview my changes. After starting the doc site server, a watching gulp task overwrites the site's main.css
with the Sass-compiled version. (This means you may need to sassify also the documentation site)
git clone --recursive https://github.com/gpbl/material-ui-sass.git
cd material-ui-sass
npm install # will install material-ui-sass dep
npm run setup # will install material-ui docs and deps
npm run dev # run the dev environment
npm run dev
should open automatically the documentation site. While editing the .scss
files, you will see a live preview of the changes.
PS. You need to make a change in a .scss
file to overwrite the original css.
I start from the github's compare view showing the diff from the previous version (e.g. the v0.4.0 tag) to the current release (e.g. the v0.5.0 tag – not master!). This view shows which .less
files have been changed.
Then I keep opened 2 browser's windows: one displaying the the Sass version I'm working on (that running with npm run dev
) and the other one showing http://www.material-ui.com, to help spotting the differences between the two versions.
FAQs
SASS version for the material-ui CSS framework
We found that material-ui-sass demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.