So I have an AppBar component for my Header, and I would like to center the title in the AppBar. As you can see I would have a button on the left and a button on the right. I would have these buttons hugging the left and the right, respectively.
const styles = {
root: {
flexGrow: 1
}
};
class Header extends Component {
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<LeftButton />
<Typography variant="h4" color="inherit">
Title
</Typography>
<RightButton />
</Toolbar>
</AppBar>
</div>
);
}
}
What would be an approach to center the title?
My initial thought was having a grid of three columns, and then left-aligning the first, center-aligning the second, and right-aligning the third.
Another possibility is to give the title FlexGrow property and then setting text-align to center, but the issue with that approach would be that if the content on the left and right side are unequal, it would be slightly off center.
you can use withStyles() that is exported by MaterialUI to put some CSS into components.
And, they have a example that make a AppBar, i guess will help! that i edit and make this.
In the original code, in the class 'grow', i remove the flexGrow: 1 and put margin: "auto"
Related
I have a footer component in my React app which contains links to different sections of the website.
Instead of lots of different components to render for each section, I am just making a main component for each section and then within this component there are different parts of the page. i.e
First page
section 1
section 2
section 3
If I want to be able to click a link on the footer to take me to section 3 of the first page, is this possible? Currently I wrote the code in the footer to take me to a new route,
<Grid item xs={12} sm={3}>
<Typography variant='h6'>Golf</Typography>
<List>
<ListItem component={NavLink} color='text.secondary' to='/section-1' sx={{textDecoration:'none', color: 'black'}}>Section 2</ListItem>
<ListItem component={NavLink} color='text.secondary' to='/section-2' sx={{textDecoration:'none', color: 'black'}}>Section 2</ListItem>
</List>
</Grid>
But now I want it to take me to a route '/firstpage' and then to section 1 on that page.
On each page I have all the sections wrapped in a div with a ref and using the useRef hook
const section1 = useRef(null);
const section2 = useRef(null);
const scrollToSection = (elementRef: any) => {
window.scrollTo({
top: elementRef.current.offsetTop - 110,
behavior: 'smooth'
})
}
return (
<>
<div ref={section1}>
//code
</div>
<div ref={section2}>
//code
</div>
</>
)
On each page I have a basic nav system at the top so when I click on a link it scrolls to the relevant section using the scrollToSection function onClick={() => scrollToSection(section2)}
Can I use what I already have to be able to let a user click on a link in the footer and it will take them to the correct route and then automatically scroll to that section.
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
}
}));
I want to put a logo on the left side of the Toolbar in React (Material-UI Apppbar), but I don't get why it doesn't work. The logo is not showing at all.
import logo from '../../assets/companylogo.png';
const useStyles = makeStyles((theme) => ({
...
logo: {
width: '10%',
},
...
}));
<AppBar position='sticky'>
<Toolbar className={classes.toolbar} variant='dense'>
<img scr={logo} className={classes.logo}/>
<div className={classes.search}>
...
</div>
<div className={classes.grow} />
<div className={classes.sectionDesktop}>
...
</div>
<div className={classes.sectionMobile}>
...
</div>
</Toolbar>
</AppBar>
When <img/> is included I can see the width changes on the left depending on what the width of the logo is set to.
Here it is without the <img/>
I tried different images both .png and other formats, but id doesn't solve anything. I made sure the path to images is correct and also tried to wrap the <img/> with <div></div>, but nothing solved it. I thought it might be a z-index issue and the image is simply hiding behind the Toolbar, but that doesn't make sense to me and after playing a bit with zIndex value for image it didn't solve it either. I'm out of ideas here.
Any idea what am I doing wrong here?
How can I pass the styles overlayProps into the Panel component as it is stated in https://developer.microsoft.com/en-us/fluentui#/controls/web/panel
I tried:
<Panel
overlayProps={{styles:{backgroundColor:'red'}}}
/>
But does not seems to work
The only thing missing from the original source is root, which is the target element in the overlay.
This snippet (full example) shows a Panel with a red overlay. (full example)
const PanelBasicExample: React.FunctionComponent = () => {
return (
<div>
<Panel
headerText="Sample panel"
isOpen={true}
overlayProps={{ className: "foo", styles: { root: { backgroundColor: "red" }}}}
>
<p>Content goes here.</p>
</Panel>
</div>
);
};
layerProps is an optional props to pass to the Layer component hosting the panel.Do you have a Layer Component?
Also, styles can have a className as properties, you may try to give the component a customised name and adapt the css.
i guess you can check out the "Panel - custom navigation" provided in your link.
it has something like below to override searchbox. I think Panel should be the same since it also accepts a similar styles prop.
const searchboxStyles = { root: { margin: '5px', height: 'auto', width: '100%' } };
<SearchBox
placeholder="Search here..."
styles={searchboxStyles}
ariaLabel="Sample search box. Does not actually search anything."
/>
Iam using modal library from material ui and i want to be scrollable when the context goes outside of the visible eye. The problem is that when i have my cursor outside of the white paper, the window doesnt scroll. But when i put in the white area and scroll, then the content scrolls.
I cant find any solution to why is this happening and how to fix this. Is there any config i missing?
Thanks.
import Dialog from "#material-ui/core/Dialog";
const classes = {
root: "modal",
paper: "modal-paper",
container: "modal-container",
};
const Modal = ({ open, children, onClose, className }) => (
<Dialog
open={open}
onClose={onClose}
classes={classes}
className={className}
>
{children}
</Dialog>
);