Support 2 CSS patterns: Material UI and styled components VS styled-jsx, tailwind and postCSS about vulcan-next HOT 12 OPEN

Hey @eric-burel ,

I'm coming from this thread: vercel/styled-jsx#142

Do you still think it's still worth it to customize MaterialUI V5 using Styled-JSX?

I got styled-jsx working actually without a wrapper -- Installing "styled-jsx-plugin-sass" did the trick, but requires a unique className to locally scope it:

      <>
        <Button className="BasicButton" variant="contained">Test</Button>
        <style jsx>{`
           :global(.BasicButton.MuiButton-root) {
              box-shadow: none;

              &:hover {
                background-color: red;
              }
            }
          `}</style>
      </>

from vulcan-next.

Hi, this PR will bring the final Mui v5 update: #124, I'll merge it in a few days.

If you are going to use Material UI, then no, I would use their own styling approach. I didn't like Mui v4 styling solution, but v5 is way better. If you really want a CSS-ish syntax, you can directly use Emotion, since Mui is based on it, it works perfect.

I would keep Styled JSX for simpler apps with more design (typically landing pages, blogs...), when you don't want to use an existing UI lib.

from vulcan-next.

Many people are going with 1.

from vulcan-next.

Update in 2021: Material UI v5 will bring Emotion out-of-the-box, so approach 1 will be simplified (and that's excellent news).

For the "purist" approach, Tailwind seems to be appreciated a lot. Will it be a trend? Will see in a few months, I am testing it on personal project.
First issue to handle: https://stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker. We need to add stylelint as a recommended vs code package (in .vscode/extensions.json) + the right config to solve this (in .stylelintrc).

from vulcan-next.

@eric-burel I would even say emotion (default) and styled-components out-of-the-box.

from vulcan-next.

@eric-burel Hi I am about to start a project,and have few clarification,would u be able to tell me how can work with metrial ui and styled components together,bcz my main concern is we have to use typescript and start the project from webpack setup ,so do i need to install postcss for that ,and need to done testing also.
1)how to use typescript with MUI and styled components together(if any usefull link for learn this for big project pls attached)
2)Is it possible to run jest unit testing
3)do i need to install postcss for acive above task,how it goes with (1)
4)going to use monorepo design for the project
5)we are plan to use webpack from scrach not from CRA cmnd,so do i need postcss to insatll or css in js pluings(no idea)
6)how component reusing will help with (1)

so if anyone can guide me on this really appricatet it.

from vulcan-next.

Hi @Inokcode, I'll try to answer your questions:

1. Just use it, for additional doc you should check Material UI documentation and Styled components documentation.
   Please note that we will probably soon change toward Emotion which is now the default for Material UI (but it works exactly like Styled Components no worries).
2. Yes it's all setup yarn run test:unit, @Timi-Duban just made a great PR so you can even differentiate server-only tests and client-only tests if necessary
3. PostCSS is already setup in the application, it will process Styled JSX content and CSS modules (the basic styling solutions from Next https://nextjs.org/docs/basic-features/built-in-css-support). I am not sure if there is something else to do with styled components.
4. I am not fond of true monorepos, like using Lerna in Next.js apps, because they are very complex. What's the use case? In Vulcan Next we "simulate" a monorepo using Webpack, so that the folders you create in packages can be imported within an app (it behaves like a monorepo, but it's simpler).
5. This is a Next.js framework, please stay in the "pit of success" => avoid fully custom webpack stuff. We don't use Create React App.
6. You should definitely take a look at styled components documentation and educational resources about component driven design and stuff like that

from vulcan-next.

Hi @eric-burel I really appreciate the time taken for to reply for my questions, thank you for the quick reply.

from vulcan-next.

For Material UI v5, we still need to check:

• Theme switching, it seems to need a specific API https://stackoverflow.com/questions/68382679/toggling-between-dark-light-mode-material-ui/68385247#68385247
• Best syntax for CSS definition => string syntax with styled API from Material UI is not correctly handled by VS Code, maybe we need to add a css tag or a specific plugin. Which syntax should we favour, the JSON one or the CSS one?

Using strings seems to make syntax highlighting complicated, Styled Components plugin is still full of bugs after many years. Using JS objects is maybe more suited, as most UI development languages DON'T have a thing like CSS and are pretty happy without it.

from vulcan-next.

@eric-burel Thanks Eric. Makes sense. Mui v5 is definitely a great upgrade, I also wasn't a fan of JSS. Wish they supported Tag Functions tho. Writing CSS syntax always feels more natural than object-style

from vulcan-next.

They still use the JSON syntax. However I think you can keep using Emotion as usual if you want to avoid that, only thing you'll miss will be the helpers provided by Material UI + "magic" link with the theme (you'll have to call useTheme). In Vulcan Next I'm still hesitant. Right now I use the default JSON syntax for the demo components but that could change, I also like string CSS.

from vulcan-next.

Some tools that could help writing unstyled components:

• react-aria for handling state and accessibility https://react-spectrum.adobe.com/react-aria/getting-started.html
• radix UI for handling components that can hardly be written in HTML: https://www.radix-ui.com/

from vulcan-next.