material-ui VS emotion

Compare material-ui vs emotion and see what are their differences.

material-ui

MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design. (by mui-org)

emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition (by emotion-js)
Our great sponsors
  • Nanos - Run Linux Software Faster and Safer than Linux with Unikernels
  • Scout APM - A developer's best friend. Try free for 14-days
  • SaaSHub - Software Alternatives and Reviews
material-ui emotion
134 18
73,146 14,027
1.8% 2.5%
10.0 7.7
3 days ago 7 days ago
JavaScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

material-ui

Posts with mentions or reviews of material-ui. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-11-22.

emotion

Posts with mentions or reviews of emotion. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-11-23.
  • The React roadmap for beginners you never knew you needed.
    42 projects | dev.to | 23 Nov 2021
    Emotion
  • The Mysterious Case of Emotion and "exports is not defined"
    2 projects | dev.to | 3 Nov 2021
    That sent me on a lengthy wild goose chase. Stack Overflow had one question with no accepted answer. Babel was the primary suspect so I tried reordering all my presets and then upgrading to the latest version. I poked around in the Webpack config. The Emotion repo’s issues page wasn’t any help. I tried completely switching up our Emotion implementation but that created a whole new set of problems.
  • How to Add An RSS Feed to a NextJS Blog
    3 projects | dev.to | 17 Oct 2021
    My site uses Chakra UI for theming, which uses Emotion -- a CSS-in-JS library -- under the hood. Emotion will happily render tons of tags when statically generating HTML from your React components. For most use cases where you render React on the server (statically or not), this is desirable. In the case of RSS/Atom feeds, this is pretty useless.

    Solution

    The solution here is to strip all the and tags from the generated HTML. Rather than summoning The One whose Name cannot be expressed in the Basic Multilingual Plane by trying to use regex here, I found this library to help me with this task:

    const cleanHtmlContent = stripHtml(htmlContent, {
        onlyStripTags: ['script', 'style'],
        stripTogetherWithTheirContents: ['script', 'style'],
    }).result;
    
    Enter fullscreen mode Exit fullscreen mode

    The end result

    I now have serve RSS, Atom and a JSON Feed for your reading pleasure. Most of the relevant code can be found here

    Future plans

    At some point I want to diversify my writing output by not only writing about tech. And even within the topic of tech there are many sub-topics I could write about, not all of which are equally interesting to every reader (all 5 of them, including my mom 👩‍👦). I'm planning to introduce tags to allow filtering content once I have enough of it.

    Once I have tags, I would like to start supporting dynamic feeds so readers can subscribe only to the stuff they actually want to read. I imagine building an endpoint like this:

    /feeds/by-tags.xml?tags=tag1,tag2
    
    Enter fullscreen mode Exit fullscreen mode

    I'm curious if others are doing this!

  • A 55% Performance Improvement Upgrading Material-UI from v4 to v5
    1 project | dev.to | 14 Oct 2021
    This was the biggest chunk of work for us. We've gone through a styling change before with Material-UI when they moved from inline styles to JSS, but this time Material-UI 5 moves away from JSS as the default styling solution to emotion. We've been relying heavily on JSS for the majority of our components, so lots of them looked something like this...
  • Using Nx Workspace generators to scaffold new blog posts
    7 projects | dev.to | 12 Oct 2021
    "style": { "description": "The file extension to be used for style files.", "type": "string", "alias": "s", "default": "css", "x-prompt": { "message": "Which stylesheet format would you like to use?", "type": "list", "items": [ { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SASS(.scss) [ http://sass-lang.com ]" }, { "value": "styl", "label": "Stylus(.styl) [ http://stylus-lang.com ]" }, { "value": "less", "label": "LESS [ http://lesscss.org ]" }, { "value": "styled-components", "label": "styled-components [ https://styled-components.com ]" }, { "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, { "value": "styled-jsx", "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" } ] } }, ...
  • Mantine 3.0 is out – 120+ hooks and components with dark theme support
    4 projects | reddit.com/r/reactjs | 11 Oct 2021
    Mantine no longer depends on react-jss, we’ve migrated everything to emotion – based on our internal tests styles management became ~ 40% more performant and contribute ~15% less to bundle size (see comment if you want to find out more)
  • Are junior web dev positions dead?
    1 project | reddit.com/r/cscareerquestions | 3 Oct 2021
  • I created a blogging platform
    4 projects | reddit.com/r/webdev | 7 Aug 2021
    Ahh, I see. Yeah, I'm using emotion for styling so saying something like:
  • Real-world CSS vs. CSS-in-JS performance comparison
    9 projects | news.ycombinator.com | 8 Jun 2021
  • Serializing a style using your Chakra UI theme
    3 projects | dev.to | 7 Jun 2021
    I looked for a nicer way to handle a CSS object in JavaScript instead of using one big string. Chakra UI uses emotion under the hook to build the CSS classes, so I found this solution:

What are some alternatives?

When comparing material-ui and emotion you can also consider the following projects:

JSS - JSS is an authoring tool for CSS which uses JavaScript as a host language.

antd - An enterprise-class UI design language and React UI library

Tailwind CSS - A utility-first CSS framework for rapid UI development.

styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

styled-jsx - Full CSS support for JSX without compromises

linaria - Zero-runtime CSS in JS library

rsuite - 🧱 A suite of React components .

Ionic Framework - A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

daisyui - ⭐️ ⭐️ ⭐️ ⭐️ ⭐️  Tailwind Components

styletron - :zap: Toolkit for component-oriented styling