I have a DropDownButton
<DropDownButton text="i" items={items} />
that has padding around it
How would one remove that padding for just this one button not all of them on the site ?
See for more context
https://codesandbox.io/s/unruffled-snow-cx50hi
You can also pass buttonClass prop to that particular DropDownButton, I have also shown it here.
https://codesandbox.io/s/crazy-forest-1lvs7f?file=/app/main.tsx
Please check the props that are being passed to DropDownButton for a better understanding.
Add below css in a new file called style.css
button {
padding: 0 !important;
}
and import it in main.tsx as
import ./style.css
Related
Material UI Dialog is a portaled component. The way I understood it and saw it in action is that it renders its markup outside the React's root element.
It renders itself before the </body> tag.
Now I have encountered a problem because of this.
When user chooses the dark mode, I set a dark class on top-level element, one beneath the root element.
And on all components I can use dark variant to apply styles, like dark:bg-zinc-700.
But when I apply it the <Dialog /> component, it won't affect its style, though I can see that the class exists in the output.
<Dialog
PaperProps={{
className="dark:bg-zinc-700"
}}
How should I solve this problem? I know I can use sx to apply style. But that means I need to lose consistency and I also don't know how to translate Tailwind to sx. Thus I prefer to keep using Tailwind.
I solve this problem with this Link
MuiDialog: {
defaultProps: {
container: rootElement,
},
},
Check this
#HosseinFallah Looking back at your post I think this won't work because tailwind and material ui handle dark modes differently. However, you can target Material UI css without using sx. You can use the Dialog API classes in your css and apply tailwind colors on them like this in your global css:
.MuiDialog-paperScrollBody {
background-color: theme(colors.dark) !important;
}
Where dark is the custom dark color you've set in your tailwind.config.js
To add to the answer you can also set this for your whole app by wrapping it with the Mui's StyledEngineProvider. This way tailwind will be prioritized when injecting styling.
In your index.tsx
import { StyledEngineProvider } from '#mui/material';
const container: any = document.getElementById('root');
const root = createRoot(container);
root.render(
<Provider store={store}>
<React.StrictMode>
<StyledEngineProvider injectFirst>
<App />
</StyledEngineProvider>
</React.StrictMode>
</Provider>
);
Then this will be possible without needing to specify !important
<Dialog
PaperProps={{
className="dark:bg-zinc-700"
}}
Did you set the "important" property in the Tailwind config (tailwind.config.js) by chance?
If you set it to something like "#root" then it will only match the elements inside the #root element which is bypassed when MUI uses React Portals.
You could change it to something like "#tw" and then set your body's ID to "tw" so it will always match since Portals are always children of the body element.
if you completely interoperate to tailwindcss, see: https://mui.com/material-ui/guides/interoperability/#tailwind-css
i think this mistake occure in tailwindcss.config.js.
by adding another id to wrap dialog container and asign it to "important" property will solve this problem
You can increase the specificity of the TailwindCSS by using !important selector.
You can find more here https://tailwindcss.com/docs/functions-and-directives
This question already has answers here:
Next Image not taking class properties
(4 answers)
Closed 1 year ago.
I use the Next.js <Image /> component to load the logo in my header. I want to position the component within the header. In short, I need to specify its margin.
<div className={styles.header}>
<Image src={logo} alt="logo" />
<nav>navbar</nav>
<ul>
<li>opt1</li>
<li>opt2</li>
<li>opt3</li>
</ul>
</div>
I know that I can simply place the <Image /> inside a positioned block, but is there a way to do it directly?
No there is not. You can modify many properties by passing className prop to next/image. But since margin is relative to the wrapper, modifying it won't help you.
What you are trying to do requires setting styles on the wrapper inserted over img tag by next/image, which currently is not possible (directly). See this discussion for better insight.
However, as a workaround (for your particular case) you can add the styles on your header that select the wrapper div. Refer: CSS Combinators
.header > div {
margin-left: 2em;
}
Update: In newer versions you can use the experimental image component that renders img without any wrapper.
I think using styled-components is a pretty way.
import Image from 'next/image';
import styled from 'styled-components';
const StyledImage = styled(Image)`
/* your custom style */
margin: 10px;
`;
and using it: <StyledImage src={image_path} />
As nextjs documentation on Image component says you can use className for styling the same way as you do with your usual elements.
You can apply class name to the <Image/> component. E.g.
<Image
className="dummy-name"
src={src}
width={2400}
height={1598}
layout="responsive"/>
Documentation has listed some useful properties.
import React from 'react';
import Button from '#material-ui/core/Button';
export default function DisableElevation() {
return (
<Button variant="contained" color="primary" disableElevation >
Disable elevation
</Button>
);
}
It is quite simple just make border:none and outline:none that's it for a corresponding component.
style={{
border:"none",
outline:"none"
}}
I also got this issue
The problem was using both MUI and bootstrap. remove importing 'bootstrap/dist/css/bootstrap.min.css' in project and after remove bootstrap, problem will solve
you don't need this both libraries for ui dev works you can do most of things by using one. You can use either MUI or bootstrap as your wish but using both in same project cause to UI effects
I am using material UI. also it has taken a lot of time to figure it out how to remove it after clicking the border. I found a way to remove the border using the below code it will help.
"&.MuiDataGrid-cell:focus-within": {
outline: "none",
},
Good morning. I have seen many examples of displaying of the predefined icons in a MaterialUI Avatar component. E.g.
h<Avatar>
<BuildIcon />
</Avatar>
but I havent been able to find an example of displaying an icon from a prop field. For instance, I have a prop that specifies I want the build icon, I thought this would work
<Avatar>
<{prop.myIcon} />
</Avatar>
but I get errors. Does anybody know a nice way to display an icon within an Avatar from props?
thanks
Bill
You can set the icon for the Avatar using the children property.
Import MUI components
import Avatar from '#mui/material/Avatar';
import BuildIcon from '#mui/icons-material/Build';
Use the Avatar (and Icon)
You can use the children property to set the icon
<Avatar children={ BuildIcon } />
This is an alternative to the traditional child component
<Avatar>
{ BuildIcon }
</Avatar>
If you pass jsx as prop you have to use only {prop.myIcon}
For example:
<SomeComponent myIcon={<YourSampleIcon />} />
If you pass component you have to use <prop.myIcon /> to render icon:
For example:
<SomeComponent myIcon={YourSampleIcon} />
Hope this helps you.
Edit:
Material-UI has provided tons of icons already in their #material-ui/icons package. You can see all MUI icons here: https://material.io/resources/icons/ and import CammelCase icon name from #material-ui/icons. For example:
// icon name: all_inbox
import AllInboxIcon from '#material-ui/icons/AllInbox';
But there is second approach too. You can import Icon component from #material-ui/core/Icon and then place icon name in it to display icon:
For example:
import Icon from '#material-ui/core/Icon'
...
return <Icon>all_inbox</Icon>;
To get icon displayed you have to add this in your index.html file:<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> to impor Material Icons font.
In Material UI, I want to set borderRadius on my buttons. Passing the style attribute seem to work for FlatButton but not for RaisedButton.
For RaisedButton, the borderRadius is applied to the parent <div> (which is necessary) but not to <button> itself (which is also necessary)
Is this a bug in Material UI? Or is this behaviour intended? If it's intended, then how do I make a RaisedButton with rounded corners?
import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import FlatButton from 'material-ui/lib/flat-button';
export default class MyButtons extends React.Component {
render() {
return (
<div>
<FlatButton label="flat button" style={{borderRadius: '25px'}}/> {/*works*/}
<RaisedButton label="raised button" style={{borderRadius: '25px'}} /> {/*does not work*/}
</div>
);
};
}
This is the intended behaviour, and says so in the docs. For the record, you would never want a style prop to be passed to multiple children as no styles would make sense across all children - and how deep in nesting would you apply them?
But I think you're mixing concerns here. Using style on a component should only ever effect the root element - and that's assuming the developer chose to pass along the style tag, which they did.
But what you're looking to do is not style the component, but style the elements of the component. What you want to do is use a CSS class:
<RaisedButton label="raised button" className="raised-button--rounded" />
.raised-button--rounded,
.raised-button--rounded button {
border-radius: 25px; /* assuming one is not already defined */
}
NB: The developers do not intend for you to change the component styles that they have not specifically exposed. Through this approach, you will run into issues eventually.