I have been following Material-UI tutorial to learn Material-UI. At 9:25 it passes "theme" to makeStyles function. My question is "How is theme object's values are available there just so? such that they can be accessed in the subsequent body like theme.breakpoints.down("sm") for example.That "theme" is not defined so far in the file. I tried reading the documentation and it mentions nothing about it quite right. makestyles documentation.Can somebody explain to me what is happening there?
Material UI has a function called createMuiTheme and the main purpose of it, is to create a muiTheme, deep merging defaults with user custom theme options and store it in defaultTheme constant https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/defaultTheme.js
and in makeStyles function it simply import that defaultTheme https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/makeStyles.js
hope this would be helpful
Related
If I used both of them, could I run into conflicts? Is this a good approach to use?
It is possible and the MUI team has been resolved it.
From the documentation:
If you are used to Tailwind CSS and want to use it together with the MUI components, you can start by cloning the Tailwind CSS example project. If you use a different framework or already have set up your project.
It is necessary to Remove Tailwind's base directive in favor of the CssBaseline component provided by #mui/material and fix the CSS injection order.
You can read how: https://mui.com/guides/interoperability/#tailwind-css
Yes you can run both ui framework. But it is not a good approach. Every ui framework has the complete solution for designing ui part. Like in tailwind css you can have the JIT compiler for compilation your custom css. Or the other hand MUI has also.
I think you can go through just only on ui framework. I have suggestion for ui. For your next js project you can use-
Tailwind Css
Theme-ui
Thank you.
Definitely, You will be in a big problem because once you initialize a styling library it applies its basic styles to the components so that if you are using more than one styling library you may not be able to change the behavior or styles of the components.
It also leads to rubbish suggestions while adding classes names and so on.
Stick to a UI libray and go with it.If you cant get it using the ui libraray do it yourself using CSS that could be more interesting and you can have more control over the components.
Use Mui base instead of Mui core.
https://mui.com/base/guides/working-with-tailwind-css/
I have tried using Mui and Tailwindcss together and it's not worth it. First, you will have to use Mui/base instead of Mui/material in order to reduce conflicts check https://mui.com/base/guides/working-with-tailwind-css. And if you really need to customize Mui components styled of the sx prop. This is just my opinion.
I'm trying import css just like I do normally in react.
import "#styles/my_lovely_component.sass"
It obviously shows the error that I cannot import global styles in components. If I change the name from my_lovely_component.sass to my_lovely_component.module.sass, the error is suppressed but the styles aren't really applied/included on my page or components.
I found out people use component styles like this
import styles from "#styles/my_lovely_component.module.sass"
const JustAComponent = () => <img className={styles.doggo_img} />
This gets annoying very quickly. I literally have been working by importing all styles globally in __app.ts, because I couldn't find a working solution to import styles like the good old(well not really old) way.
Any help will be appreciated. Thanks.
(I did consider the other styling methods like styled-jsx/components, emotion and stuff. But they're even more annoying.)
If you want to add global styles for your next project
At first you need loader in next-config.js
then read about _document.js where you can add global styles to the head.
I have created one custom directive like app-subscriber.If i mouse over on I want to show tool tip message like "This is for subscriber and need mail id". How we can do it? is it possible? Need to create new vs code extension? Anybody if know idea..please share with me.
Stackblitz: https://stackblitz.com/edit/github-qeasdu-7kqv5z?file=src/app/app.component.html
You can use Material Tooltip for this. I see you already installed Angular Material so all you need to do is:
Import BrowserAnimationsModule in your AppModule
Import MatTooltipModule in your AppModule
use it in your component template like so: matTooltip="This is for subscriber and need mail id" on the element that should show the tooltip.
Updated Stackblitz
Does material UI provide pre-built class names like bootstrap does. For example: .pull-right, .pull-left
Material-UI has it's own styling solution, among that one can override it's default css class names.
Take a look here.
I keep seeing references to a component called "LeftNav" in the material-ui react library (example: Material UI - Open LeftNav / Drawer on AppBar click), but I can't find anything about it in the documentation. What is it? How does it differ from Drawer? Why is it apparently undocumented, despite being hugely popular (at least judging by the number of questions I see about how to use it)? What is its toggle() method for, and is there a similar method for Drawer (the documentation suggests not, but for all I would know by reading the documentation there was no such component as LeftNav at all, so I don't think the documentation can really be trusted here)?
<LeftNav/> is the same as <Drawer/>. The name was changed from "LeftNav" to "Drawer" with the release of material-UI version 0.15. Take a look at the change log here and you will see this.