As part of a React and Material UI project,
In the main div I have:
<AppDrawer />
<AppHeader />
<Grid container align={ "stretch" } direction={ "row" } justify={ "center" }>
{ ...something... }
</Grid>
Where AppDrawer and AppHeader are Drawer and AppBar components of Material UI.
I'm having a hard time trying to make the Grid component take the rest of the page (besides the AppHeader component).
I tried using CSS and height: 100% the html, body, and #root tags, but that still doesn't work.
Over at the documentation they're using the align={ "stretch" } prop, but that doesn't work either.
What am I doing wrong?
Related
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
I've seen a few questions similar to this on SO but none that quite matched my needs. I'm using React and Material-UI to make a dashboard. I'm using Material-UI's mini variant drawer as a sidebar, with links that should display routes when clicked. The sidebar can be opened by clicking a button, which updates a state variable and adjusts the CSS className of the sidebar. This causes the sidebar/drawer to "slide" open.
If I click a link on the sidebar, I can easily display a desired route. However, I can't get the route to also "slide" to the side when the sidebar/drawer opens. It will probably be easier to understand by looking at the code, so I've included a link to a codesandbox below:
https://codesandbox.io/s/appbar-with-react-router-bkogj?file=/src/App.js
I basically copy and pasted everything from the Material-UI website (using v4 I believe), then added the route myself. Would appreciate any feedback on how to solve this issue.
For this I think the MiniDrawer component needs to render the content since it necessarily is aware of the space the appbar and drawer components occupy.
MiniDrawer
Take and render a children prop.
export default function MiniDrawer({ children }) {
...
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
...
>
...
</AppBar>
<Drawer
...
>
...
</Drawer>
<main className={classes.content}>{children}</main>
</div>
);
}
App
Render the Outlet as a child component.
export default function App() {
return (
<div className="App">
<AppBar>
<Outlet />
</AppBar>
</div>
);
}
RejectTable
Remove the excess margin so it fills the content area the parent component allows.
const useStyles = makeStyles((theme) => ({
content: {
flexGrow: 1,
padding: theme.spacing(3),
height: "100%",
// marginLeft: "4em" // <-- remove
}
}));
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.
i want custom style like margin-left, height, widht in react-loading.
i'm only can custom color, but custom margin doesn't work.
<Loading type ='spinningBubbles' color='#0088CF' />
Best wishes! Wish for replying.
You add custom styles using the style prop on DOM element components.
<div style={{ margin: '100px' }}>
<Loading type ='spinningBubbles' color='#0088CF' />
</div>
if you have access to change the loading component you could pass the style (or just the margin value) through to the underlying DOM elements as a prop.
If you have a lot of custom styling to do, there is a great library called Radium for making it easier.
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.