I am working on a small portfolio website, I've added an avatar, and trying to override it's style with makeStyles class, tho the Mui avatar root is overriding my class,
is this possible to do without the use of !important ?
export const HomePage = () => {
const classes = useStyles()
return (
<Grid container justifyContent="center">
<Avatar className={classes.headerAvatar} src={avatar} alt="" />
</Grid>
)
}
export const useStyles = makeStyles(theme => ({
headerAvatar: {
width: theme.spacing(13),
height: theme.spacing(13),
margin: theme.spacing(1)
},
}))
According to the docs, you can override the css style of the root class using the classes prop, like:
export const HomePage = () => {
const classes = useStyles()
return (
<Grid container justifyContent="center">
<Avatar classes={classes} src={avatar} alt="" />
</Grid>
)
}
export const useStyles = makeStyles(theme => ({
root: {
width: theme.spacing(13),
height: theme.spacing(13),
margin: theme.spacing(1)
},
}))
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 can not change the color and CSS from the TAB PANEL using material-ui Some ideas? :(
Looks like useStyle and theme are not working. I could change some other properties like scrollable but not the colors. I wonder if there is some conflict con other CSS, but I don't think so because the colors I see from the TABs are blue, I'm not using blue in my Web-App.
import PropTypes from 'prop-types';
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tabs from '#material-ui/core/Tabs';
import Tab from '#material-ui/core/Tab';
import Typography from '#material-ui/core/Typography';
import Box from '#material-ui/core/Box';
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`scrollable-auto-tabpanel-${index}`}
aria-labelledby={`scrollable-auto-tabpanel-${index}`}
{...other}
>
{value === index && (
<Box p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `scrollable-auto-tabpanel-${index}`,
'aria-controls': `scrollable-auto-tabpanel-${index}`,
};
}
function LinkTab(props) {
return (
<Tab
component="a"
onClick={(event) => {
event.preventDefault();
}}
{...props}
/>
);
}
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
margin: 0,
background: 'white',
},
}));
export default function NavTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<AppBar position="static">
<Tabs
variant="container-fluid"
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
centered
>
It's actually the AppBar that has that blue color. Upon reviewing the stylesheet, the individual tab items actually have transparent as a default value for background-color. So to solve this, just override the background of the root element of AppBar
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
margin: 0,
background: "white"
}
}));
export default function NavTabs() {
const classes = useStyles();
<AppBar position="static" classes={{ root: classes.root }}>
...
import React from 'react';
import {
List, ListItem,
} from '#material-ui/core';
import {
makeStyles, createStyles,
} from '#material-ui/core/styles';
import clsx from 'clsx';
import VideoCard from './VideoCard';
const useStyles = makeStyles(() => createStyles({
root: {
display: 'inline-flex',
},
item: {
padding: '80px 40px',
},
}));
export default function VideoList(props: any) {
const { videos } = props;
const classes = useStyles();
return (
<div>
<List className={clsx(classes.root)}>
{videos.map((video: any) => (
<ListItem className={classes.item} button key={video}>
<VideoCard videoTitle={video.title} thumbnailImage={video.imageSrc} key={video} />
</ListItem>
))}
</List>
</div>
);
}
import React from 'react';
import Typography from '#material-ui/core/Typography';
import clsx from 'clsx';
import Thumbnail from './Thumbnail';
export default function VideoCard(props: any) {
const { thumbnailImage, videoTitle } = props;
return (
<div>
<Thumbnail imageSrc={thumbnailImage} />
<Typography>{videoTitle}</Typography>
</div>
);
}
I am trying to display a series of video titles and thumbnails (like how video cards are displayed on the frontpage of youtube). How do I get the cards to go to a new line say every 4 cards? Currently, they line up and go off screen.
Edit: added my VideoCard code aswell
Make it float: 'left' and then set 100% - 25% to make a new line every 4 cards
const useStyles = makeStyles(() =>
createStyles({
root: {
width: "100%",
display: "inline-block"
},
item: {
padding: "80px 40px",
float: 'left',
width: '25%'
}
})
);
I have Dialog component where I have a button(bottom right corner) which shows another div with an item list. The problem I'm facing is that the list is being rendered inside the Dialog component and it's being cropped. I set the position: absolute, z-index and set the position: relative to the parent but it does not work. Here is how it looks like. Any helpful tips I would appreciate it.
1) Before I click the button to show the list
2) After I click the button. Highlighted css properties for the list element
And the code for Dialog component :
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core";
import Button from "#material-ui/core/Button";
import Dialog from "#material-ui/core/Dialog";
import DialogContent from "#material-ui/core/DialogContent";
import DialogContentText from "#material-ui/core/DialogContentText";
import DialogTitle from "#material-ui/core/DialogTitle";
import IconButton from "#material-ui/core/IconButton";
import CloseIcon from "#material-ui/icons/Close";
import Typography from "#material-ui/core/Typography";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import { ProjectTreeWindow } from "../index";
const useStyles = makeStyles(theme => ({
addTaskButton: {
marginTop: 10
},
dialog: {
width: "40%",
maxHeight: 435
},
closeButton: {
position: "absolute",
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500]
},
controlsWrapper: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}
}));
const AddQuickTaskDialog = props => {
const classes = useStyles(props);
const { open, close } = props;
const [quickTaskDescription, setQuickTaskDescription] = useState("");
const [textInputRef, setTextInputRef] = useState(null);
const handleChangeQuickTaskDescription = event => {
setQuickTaskDescription(event.target.value);
};
const handleAddQuickTaskSubmit = () => {
alert("Quick task submitted");
close(textInputRef);
};
return (
<Dialog
data-testid="add-task-quick"
classes={{
paper: classes.dialog
}}
maxWidth="lg"
open={open}
keepMounted
onClose={() => {
close(textInputRef);
}}
aria-labelledby="quick-task-dialog"
aria-describedby="quick-task-dialog-description"
>
<DialogTitle id="quick-task-dialog-title">
<Typography variant="h6">Quick Add Task</Typography>
{close ? (
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={() => {
close(textInputRef);
}}
>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
<DialogContent>
<div className={classes.wrapper}>
<OutlinedInput
onChange={handleChangeQuickTaskDescription}
inputRef={input => {
setTextInputRef(input);
return input && input.focus();
}}
fullWidth
// className={showAddTaskInput ? classes.show : classes.hide}
placeholder="e.g. Take the dog out for a walk"
inputProps={{ "aria-label": "add task" }}
/>
<div className={classes.controlsWrapper}>
<Button
className={classes.addTaskButton}
disabled={quickTaskDescription.length === 0}
data-testId="quick-add-task-submit"
// onClick={handleAddTaskSubmit}
color="primary"
onClick={handleAddQuickTaskSubmit}
>
Add Task
</Button>
<ProjectTreeWindow />
</div>
</div>
</DialogContent>
</Dialog>
);
};
export default AddQuickTaskDialog;
and for the List component:
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core";
import ListAltTwoToneIcon from "#material-ui/icons/ListAltTwoTone";
import IconButton from "#material-ui/core/IconButton";
import { CustomizedToolTip } from "../index";
import OutlinedInput from "#material-ui/core/OutlinedInput";
import DoneTwoToneIcon from "#material-ui/icons/DoneTwoTone";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import FiberManualRecordTwoToneIcon from "#material-ui/icons/FiberManualRecordTwoTone";
import { useProjectsValue, useSelectedProjectValue } from "../../context";
const useStyles = makeStyles(theme => ({
root: {
position: "absolute",
zIndex: 9999,
top: 200,
left: 0,
display: "flex",
flexDirection: "column",
"&:hover $child": {
visibility: "visible"
}
},
wrapper: {
position: "relative !important"
},
selected: {
"& $child": {
visibility: "visible !important"
}
},
hidden: {
visibility: "hidden"
},
listItemIcon: {
minWidth: 30
}
}));
const ProjectTreeWindowList = props => {
const [textInputRef, setTextInputRef] = useState(null);
const [typeProject, setTypedProject] = useState("");
const classes = useStyles(props);
const { projects } = useProjectsValue();
return (
<div className={classes.root}>
<OutlinedInput
// onChange={handleChangeQuickTaskDescription}
inputRef={input => {
setTextInputRef(input);
return input && input.focus();
}}
placeholder="Type a project"
inputProps={{ "aria-label": "select project" }}
/>
<List>
{projects &&
projects.map((project, index) => (
<ListItem
onClick={() => {
alert("move selected project to input");
}}
// selected={active === project.projectId}
button
// classes={{
// root: classes.root,
// selected: classes.selected
// }}
>
<ListItemIcon
className={classes.listItemIcon}
style={{ color: project.color }}
>
<FiberManualRecordTwoToneIcon />
</ListItemIcon>
<ListItemText primary={project.name} />
<ListItemIcon
className={`${classes.listItemIcon} ${classes.hidden}`}
>
<DoneTwoToneIcon />
</ListItemIcon>
</ListItem>
))}
</List>
</div>
);
};
const ProjectTreeWindow = props => {
const classes = useStyles(props);
const [showProjectTreeWindow, setShowProjectTreeWindow] = useState(false);
const handleShowProjectWindow = () => {
setShowProjectTreeWindow(!showProjectTreeWindow);
};
const handleCloseProjectWindow = () => {
setShowProjectTreeWindow(false);
};
return (
<div className={classes.wrapper}>
<CustomizedToolTip title="Select a project">
<IconButton onClick={handleShowProjectWindow} aria-label="add-project">
<ListAltTwoToneIcon />
</IconButton>
</CustomizedToolTip>
{showProjectTreeWindow ? <ProjectTreeWindowList /> : null}
</div>
);
};
export default ProjectTreeWindow;
It is because of the combinaison of position: relative and overflow-y: auto from the <Paper> component. If you override one of this property, it won't be hidden anymore.
To do this, there is a PaperProps property in <Dialog>.
Example:
<Dialog {...otherProps} PaperProps={{style: {position: 'static'} }}/>
I have my own theme, I can theming well.
Right now I have three different styles with material UI tabs. That's why I need to change styles using makeStyles.
This is example of tab I need to change
...
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.pallete.primary
},
tabs: {
/// some styles
}
...
}
));
...
<Tabs
...someProps
className={classes.tabs}
>
element inside tab have such classes:
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary Mui-selected MuiTab-labelIcon">
I have tried to edit styles the same way as
... = createMuiTHeme ({
overrides: {
...some overrides
}
in my case:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: "#121D42",
MuiButtonBase: {
root: {
///some styles
},
}
},
...
but it doesn't work with makeStyles
So how can I edit buttons inside tabs using makeStyles(), is it possible? Or help me with solution please
I have found a solution for now.
Using Styled Components and with creating a styled element - we can change styles easier. We should StylesProvider
const NewButton = styled(({styledComponentProp, ...rest}) => (
<Button classes={{label: 'label'}} {...rest}/>
))`
.label {
color: blue;
font-size: ${props => props.styledComponentProp};
}
`
export const BlueButton = styled(props => {
return (
<StylesProvider injectFirst>
<NewButton variant="contained" styledComponentProp="20px"> Red Labeled Button </NewButton>
</StylesProvider>
);
})`
`;
But have we any better solutions?