I'm trying to set the position of the indicator to the top of TAB instead of the bottom like:
I checked and tried to update CSS but it didn't work. I'm new to react so I couldn't customize the components.
I create an example in codesandbox that I share with you.
https://codesandbox.io/s/usage-p0y9t?file=/index.js
You can pass to Tabs the property classes to override internal classes.
In this case you can pass a new class to the indicator and override his style.
Take a look at the link below
https://material-ui.com/api/tabs/#css
To reinforce #Xavier 's answer, I found that we could use the TabIndicatorProps prop for Tabs component as below.
<Tabs
TabIndicatorProps={{
sx: {
top: 0
}
}}
>
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
2022 Solution
https://mui.com/styles/basics/
#mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the #mui/material anymore, deprecated in v5. If you don't want to have both emotion & JSS in your bundle, please refer to the #mui/system documentation which is the recommended alternative.
⚠️ #mui/styles is not compatible with React.StrictMode or React 18.
You can utilise the sx property on the component to access any css classes directly.
https://mui.com/api/tabs/#css
<Tabs
orientation="vertical"
value={value}
onChange={handleChange}
sx={{
'.MuiTabs-indicator': {
left: 0,
},
}}
>
<Tab label="One" />
<Tab label="Two" />
<Tab label="Three" />
</Tabs>
Related
I'm having certain styling for the <Tab> component from MUI and currently I'm wrapping this tab with a <Link> from react-router-dom. The <Tab> has some styling which handles the active tab etc. but the Link messes this up.
What is the cleanest way to make sure the <Link> styling gets removed and it displays the <Tab> styling instead?
Code is as follow:
<Link to='/app/listings'>
<Tab value="one" icon={<FormatListBulletedIcon />} label="Challenges" iconPosition='start' />
</Link>`
edit:
The <Tab> is styled in my MUI Theme as followed:
components: {
MuiTab: {
styleOverrides: {
root: {
minHeight:24,
fontSize: 12,
padding: '6px 10px',
justifyContent: 'flex-start'
},
},
},
},
The <Link tag wrapping it overwrites this.
Simple example: https://codesandbox.io/s/confident-framework-u01mdk?file=/src/App.js
Remove the Link tag and styling changes.
You can render the Tab component as a Link.
Instead of
<Link color="inherit" to="/app/listings">
<Tab
value="one"
icon={<FormatListBulletedIcon />}
label="Challenges"
iconPosition="start"
/>
</Link>
use the Tab component's component prop to really render the Link component and pass all the link props to the Tab.
<Tab
component={Link}
color="inherit"
to="/app/listings"
value="one"
icon={<FormatListBulletedIcon />}
label="Challenges"
iconPosition="start"
/>
related to this issue
https://github.com/mui/material-ui/issues/20193
Pagination Arrow Working on reverse on RTL direction
From Mui Documentation:
Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of MUI components you must follow the following steps.
Documentation and Demo:
https://mui.com/material-ui/guides/right-to-left/#demo
Pagination in RTL Demo:
https://codesandbox.io/s/direction-material-demo-forked-zdgsi8?file=/demo.js
you can Change Arrow Icons like this:
The Previous Button change it to Forward Button and the Next Button Change it to Back Button :) Enjoy!! XD
reference For changing icons: https://mui.com/material-ui/react-pagination/#custom-icons
<Pagination
count={pageCount}
page={page}
onChange={(e, newPage: number) => setPage(newPage)}
renderItem={item => (
<PaginationItem
components={{ previous: ArrowForward, next: ArrowBack }}
{...item}
/>
)}
/>
I wanna use styled-system in my project which is the admin panel. I built project basing on React Material and I have a lot of different forms with inputs, selects, checkboxes and so on. In many places I have to set some margins/paddings for elements and I make this moment with some custom Box component, that uses styled-system functions (space, color, etc). But it the end I got a rather cumbersome structure something like this :
<Box>
<Box mb={10}>
<Box mr={2}><TextField/></Box>
<Box mr={2}><TextField/></Box>
<Box mr={2}><TextField/></Box>
</Box>
<Box>
<Box mr={2}><Select/></Box>
<Box mr={2}><Select/></Box>
<Box mr={2}><Select/></Box>
</Box>
</Box>
And it's just a little part of the component. I think, in this situation it would be good to create some wrapper around TextField/Select components which will add styled-system functions to components.
And then use them like :
<Box>
<Box mb={10}>
<TextField mr={2}/>
<TextField mr={2}/>
<TextField mr={2}/>
</Box>
<Box>
<Select mr={2}/>
<Select mr={2}/>
<Select mr={2}/>
</Box>
</Box>
But then I understand that react-material has a lot of components and what I have to do? Override all of them to have some similar style? Or what way can be more comfortable?
So what you are asking for can definitely be achieved without adding that much noise to the markup.
First off, the styled markup works for all material-ui components. Luckily, styled-system is ALSO interoperable with styled-components. So you can do this
const StyledButton = styled(TextField)`
color: red;
// to access theme in a styled-system way
${get("mt", 3)};
`;
That accessor called get is a little unique, it comes from this package. It allows you to use all the styled-system flavoured keys inside of a styled-component.
If you wanted inline props for all the material components, like you described, its a little more involved. You would need to wrap each component with the proper decorators that enable such inline props. Creating basically a shadow library.
import styled from 'styled-components';
import { variant, space, layout, position } from 'styled-system';
export default styled(TextField)(
position,
layout,
space,
// whatever else
);
Check out the official build-a-box tutorial for better insight.
MUI's docs say that it's possible for a Box wrapper to override its child's styling with the clone option, like this:
<Box color="red" clone>
<Button>Click me</Button>
</Box>
As far as I understand, it's supposed to cloneElement its child and inject the styles. However, it doesn't seem to work at all - not with buttons, nor typographies, nor any other component.
Hmm yes clone has some issues seems it will be removed in v5
https://github.com/mui-org/material-ui/issues/18496#issuecomment-557835104
for the moment could use like but not good :(
<Box color="red">
<Button color='inherit'>Click me</Button>
</Box>
I am using IconMenu with IconButton and Icon.
I want to have a label just before 'NavigationExpandMoreIcon'.
Is it possible to achieve in this possible setup or do I need to change the components that I am using?
My Code looks like:
<IconMenu
iconButtonElement={
<IconButton touch>
<NavigationExpandMoreIcon />
</IconButton>
}
onItemClick={this.handleClick}
>
{options}
</IconMenu>
I am using material UI 0.20 and React 16
I also have material ui 3.7 (So I can upgrade the component, if needed)
I think you can customize using iconButtonElement options it is accept node..
<IconMenu
iconButtonElement={
<React.Fragment>
//Use styles based on your need for label component...
<label>Your Label here</label>
<IconButton touch>
<NavigationExpandMoreIcon />
</IconButton>
</React.Fragement>
}
onItemClick={this.handleClick}
>
{options}
</IconMenu>