Here is the codesandbox link
function InlineDatePickerDemo(props) {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<Fragment>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
style={{ padding: "20px" }}
autoOk
variant="inline"
inputVariant="outlined"
label="With keyboard"
format="MM/dd/yyyy"
value={selectedDate}
InputAdornmentProps={{ position: "start" }}
onChange={(date) => handleDateChange(date)}
/>
</MuiPickersUtilsProvider>
</Fragment>
);
}
I want to reduce the gapping inside the date-picker box but giving custom styles is not affecting.
I am curious to know why style is not working and what could be the solution for such problem.
What you did is styling the parent component. In order to change the spacing between the components inside the picker, you need to override the following classes in the sub-components:
const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
padding: 0,
"& .MuiButtonBase-root": {
padding: 0,
paddingLeft: 10
},
"& .MuiInputBase-input": {
padding: 15,
paddingLeft: 0
}
}
}
});
const classes = useStyles();
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
className={classes.root}
{...}
/>
</MuiPickersUtilsProvider>
);
Live Demo
Related
I'm using V4 MUI Chip component with size : 'small' and variant: 'outlined' with a deleteIcon specified.
https://v4.mui.com/components/chips/
I'd like to override the margin-right property of the deleteIcon but I'm having trouble getting the right specificity, because MUI is applying more specific styles.
The following styles are applied to the delete icon by MUI:
.MuiChip-outlined-253 .MuiChip-deleteIconSmall-267 {
margin-right: 3px;
}
.MuiChip-outlined-253 .MuiChip-deleteIcon-266 {
margin-right: 5px;
}
How do I apply a style to override the margin-right of the deleteIcon and set it to e.g. '10px'?
You can use the class .MuiChip-deleteIcon based on the Chip api documentation (https://v4.mui.com/api/chip/)
Here is a working codesandbox to play with (has for the both default and outlined variants).
Here is the code to implement the change you want.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Chip from "#material-ui/core/Chip";
import FaceIcon from "#material-ui/icons/Face";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "center",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(0.5)
},
//Here is where you customise the css for the delete icon
"& .MuiChip-deleteIcon": {
marginRight: "20px", // Change those values to yours
},
//For customising the outlined the css for the delete icon
"& .MuiChip-outlined": {
"& .MuiChip-deleteIcon": {
marginRight: "10px", // Change those values to yours
}
}
}
}));
export default function Chips() {
const classes = useStyles();
const handleDelete = () => {
console.info("You clicked the delete icon.");
};
const handleClick = () => {
console.info("You clicked the Chip.");
};
return (
<div className={classes.root}>
<Chip label="Deletable primary" onDelete={handleDelete} color="primary" />
<Chip
icon={<FaceIcon />}
label="Deletable secondary"
onDelete={handleDelete}
color="secondary"
/>
<Chip
icon={<FaceIcon />}
label="Deletable secondary"
onDelete={handleDelete}
color="secondary"
variant="outlined"
/>
</div>
);
}
Another way would be to do something similar in the theme.
I'm using react-data-table-component in my project to create a datatable.
However, the checkboxes are appearing too large.
After checking the docs, I found this page - Overidding Styling Using css-in-js with customStyles, and this example:
// Internally, customStyles will deep merges your customStyles with the default styling.
const customStyles = {
rows: {
style: {
minHeight: '72px', // override the row height
},
},
headCells: {
style: {
paddingLeft: '8px', // override the cell padding for head cells
paddingRight: '8px',
},
},
cells: {
style: {
paddingLeft: '8px', // override the cell padding for data cells
paddingRight: '8px',
},
},
};
There are no mentions on there about checkbox styling, so I attempt this:
const customStyles = {
checkbox: {
style: {
maxHeight: '18px',
maxWidth: '18px',
},
},
};
Unfortunately, the checkboxes remained large sized.
How do I solve this so it makes the checkboxes like the size shown in their example in the screenshots?
Screenshots.
Here is how I solved it:
Create a Checkbox component, like so:
const Checkbox = React.forwardRef(({ onClick, ...rest }, ref) =>
{
return(
<>
<div className="form-check pb-5" style={{ backgroundColor: '' }}>
<input
type="checkbox"
className="form-check-input"
style={{ height: '20px', width: '20px' }}
ref={ref}
onClick={ onClick }
{...rest}
/>
<label className="form-check-label" id="booty-check" />
</div>
</>
)
})
Add Checkbox component to DataTable, like so:
<DataTable
title="Products"
columns={columns}
data={ data }
subHeader
subHeaderComponent={subHeaderComponentMemo}
onRowClicked={ handleRowClicked }
selectableRows
selectableRowsComponent={Checkbox} // Pass the Checkbox component only
responsive
persistTableHead
/>
I have this component and I would like the pagination component to be centered. I tried using justifyContent in the parent div (I know it should be also a styled component but I did it just to try it), but it's not working (see pic for reference)
import React, { useEffect } from 'react'
import styled from 'styled-components'
import { Product } from './Product';
import Stack from "#mui/material/Stack";
import Divider from "#mui/material/Divider";
import Pagination from "#mui/material/Pagination";
const Container = styled.div`
padding:20px;
display: flex;
width:100%;
flex-wrap: wrap;
box-sizing:border-box;
justify-content: space-between;
`;
function paginator(items, current_page, per_page_items) {
let page = current_page || 1,
per_page = per_page_items || 12,
offset = (page - 1) * per_page,
paginatedItems = items.slice(offset).slice(0, per_page_items),
total_pages = Math.ceil(items.length / per_page);
return {
page: page,
per_page: per_page,
pre_page: page - 1 ? page - 1 : null,
next_page: total_pages > page ? page + 1 : null,
total: items.length,
total_pages: total_pages,
data: paginatedItems
};
}
export const Products = ({items}) => {
const count = Math.ceil(items.length / 12);
const [page, setPage] = React.useState(1);
const handleChange = (event, value) => {
setPage(paginator(items, value, 12).page);
window.scrollTo(0, 500);
};
return (
<div style={{display:'flex', flexDirection:'column', justifyContent:'center'}}>
<Container>
{paginator(items, page, 12).data.map((item, index) => {
return (
<Product item={item} key={item.uniqueName}/>
);
})}
<Pagination
count={count}
page={page}
onChange={handleChange}
sx={{ '& .Mui-selected': {
backgroundColor: '#f0e3c1',
color:'white',
opacity:0.8
}, "& .MuiPaginationItem-root": {
color: "black",
fontFamily:'Montserrat',
}}}
/>
</Container>
</div>
)
}
I would like the pagination to be in the center, not aligned to the left.
can you try this <Stack spacing={2} alignItems="center"> ...pagination code.. </Stack>
<Stack spacing={2} alignItems="center">
<Pagination
count={count}
page={page}
onChange={handleChange}
sx={{
'& .Mui-selected': {
backgroundColor: '#f0e3c1',
color: 'white',
opacity: 0.8
}, "& .MuiPaginationItem-root": {
color: "black",
fontFamily: 'Montserrat',
}
}}
/>
</Stack>
In my React application, I have a Navigation bar where in there are multiple Tabs, which are created with the use of Marerial UI's AppBar, Tabs and Tab component (in sequence), as below:
function associatedProps(index) {
return {
id: `nav-tab-${index}`,
'aria-controls': `nav-tabpanel-${index}`
};
}
function LinkTab(props) {
const history = useHistory();
const route = props.route;
console.log(props);
return (
<>
<Tab
component="a"
onClick={(event) => {
event.preventDefault();
history.push(route)
}}
{...props}
/>
</>
);
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
height: theme.navBarHeight
},
tabIndicator: {
backgroundColor: PRIMARY_RED.default
},
tabBar: {
top: '80px'
}
}));
export default function NavTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="fixed" className={classes.tabBar}>
<Tabs
variant=""
classes={{indicator: classes.tabIndicator}}
value={value}
onChange={handleChange}
aria-label="nav tabs example"
>
<LinkTab {...PRIMARY_NAVIGATION.MY_LIST} {...associatedProps(0)} />
<LinkTab {...PRIMARY_NAVIGATION.MY_REQUESTS} {...associatedProps(1)} />
<LinkTab {...PRIMARY_NAVIGATION.REPORT} {...associatedProps(2)} />
</Tabs>
</AppBar>
</div>
);
}
Now herein this setup I wanted my REPORT tab to be aligned right of the App Bar. I do not see any CSS Rule or Prop which in Documentation, which can help me here.
Please suggest how can I achieve this in current setup.
You should set a class for Tabs like this:
const useStyles = makeStyles((theme) => ({
tabs: {
'&:last-child': {
position: 'absolute',
right: '0'
}
}
}));
export default function NavTabs() {
...
return (
<div className={classes.root}>
<AppBar position="fixed" className={classes.tabBar}>
<Tabs
variant=""
classes={classes.tabs}
value={value}
onChange={handleChange}
aria-label="nav tabs example"
>
<LinkTab {...PRIMARY_NAVIGATION.MY_LIST} {...associatedProps(0)} />
<LinkTab {...PRIMARY_NAVIGATION.MY_REQUESTS} {...associatedProps(1)} />
<LinkTab {...PRIMARY_NAVIGATION.REPORT} {...associatedProps(2)} />
</Tabs>
</AppBar>
</div>
);
Tabs do not provide a property to align a specific item to the start or end. But you can leverage css to achieve your result.
Add a className to the item to be right aligned and define a marginLeft property on it
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
height: theme.navBarHeight
},
tabIndicator: {
backgroundColor: PRIMARY_RED.default
},
tabBar: {
top: '80px'
},
rightAlign: {
marginLeft: 'auto',
}
}));
export default function NavTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<AppBar position="fixed" className={classes.tabBar}>
<Tabs
variant=""
classes={{indicator: classes.tabIndicator}}
value={value}
onChange={handleChange}
aria-label="nav tabs example"
>
<LinkTab {...PRIMARY_NAVIGATION.MY_LIST} {...associatedProps(0)} />
<LinkTab {...PRIMARY_NAVIGATION.MY_REQUESTS} {...associatedProps(1)} />
<LinkTab {...PRIMARY_NAVIGATION.REPORT} {...associatedProps(2)} className={classes.rightAlign}/>
</Tabs>
</AppBar>
</div>
);
}
Sample working demo
I'm using MaterialUI's tabs in my React project.
This is the JSX for the tabs:
<AppBar color="default" position="static">
<Tabs indicatorColor="primary" textColor="primary" value={tabIndex} onChange={this.handleChange}>
{instances.map(instance =>
<StyledTab
style={{ textTransform: 'initial' }}
onClick={() => { this.changeActiveInstance(instance.id) }}
label={this.getTabAddress(instance)}
icon={<ClearIcon ></ClearIcon>}
>
</StyledTab>
)}
</Tabs>
This is how i inject the css:
const StyledTab = withStyles({
root: {
textTransform: 'initial'
},
})(Tab);
The result is this:
I would like to position the "ClearIcon" elsewhere. I tried playing with the style injection a bit, with no success.
Can somebody point me to the right direction?
When trying to customize any Material-UI component, the starting point is the CSS portion of the API documentation. The most relevant classes that you may want to override in this case are wrapper, labelContainer, and label.
The best way to fully understand how these are used and how they are styled by default (and therefore what you may want to override) is to look at the source code.
Here are the most relevant portions of the styles from Tab.js:
/* Styles applied to the `icon` and `label`'s wrapper element. */
wrapper: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
flexDirection: 'column',
},
/* Styles applied to the label container element if `label` is provided. */
labelContainer: {
width: '100%', // Fix an IE 11 issue
boxSizing: 'border-box',
padding: '6px 12px',
[theme.breakpoints.up('md')]: {
padding: '6px 24px',
},
},
And here is the relevant code for understanding how these are used:
if (labelProp !== undefined) {
label = (
<span className={classes.labelContainer}>
<span
className={classNames(classes.label, {
[classes.labelWrapped]: this.state.labelWrapped,
})}
ref={ref => {
this.labelRef = ref;
}}
>
{labelProp}
</span>
</span>
);
}
<span className={classes.wrapper}>
{icon}
{label}
</span>
Below are some examples of possible ways to customize this.
import React from "react";
import PropTypes from "prop-types";
import Paper from "#material-ui/core/Paper";
import { withStyles } from "#material-ui/core/styles";
import Tabs from "#material-ui/core/Tabs";
import Tab from "#material-ui/core/Tab";
import PhoneIcon from "#material-ui/icons/Phone";
import FavoriteIcon from "#material-ui/icons/Favorite";
import PersonPinIcon from "#material-ui/icons/PersonPin";
const styles = {
root: {
flexGrow: 1,
maxWidth: 700
},
firstIcon: {
paddingLeft: 70
},
labelContainer: {
width: "auto",
padding: 0
},
iconLabelWrapper: {
flexDirection: "row"
},
iconLabelWrapper2: {
flexDirection: "row-reverse"
}
};
class IconLabelTabs extends React.Component {
state = {
value: 0
};
handleChange = (event, value) => {
this.setState({ value });
};
render() {
const { classes } = this.props;
return (
<Paper square className={classes.root}>
<Tabs
value={this.state.value}
onChange={this.handleChange}
variant="fullWidth"
indicatorColor="secondary"
textColor="secondary"
>
<Tab
icon={<PhoneIcon className={classes.firstIcon} />}
label="Class On Icon"
/>
<Tab
classes={{
wrapper: classes.iconLabelWrapper,
labelContainer: classes.labelContainer
}}
icon={<FavoriteIcon />}
label="Row"
/>
<Tab
classes={{
wrapper: classes.iconLabelWrapper2,
labelContainer: classes.labelContainer
}}
icon={<PersonPinIcon />}
label="Row-Reverse"
/>
<Tab icon={<PersonPinIcon />} label="Default" />
</Tabs>
</Paper>
);
}
}
IconLabelTabs.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(IconLabelTabs);
We have a inbuilt property to set the icon position of tab in material ui. Document link
iconPosition:'bottom' | 'end' | 'start' | 'top'