When using the Card component from Material UI it seems like the CardContent has a padding-bottom of 24px that i cannot override with the following code. I can set paddingLeft, Right and Top using this method but for some reason paddingBottom won't work.
const styles = theme => ({
cardcontent: {
paddingLeft: 0,
paddingRight:0,
paddingTop:0,
paddingBottom: 0,
},
})
And then applying that style:
<CardContent className={classes.cardcontent}></CardContent>
this is what I see when previewing the elements in the browser:
.MuiCardContent-root-158:last-child {
padding-bottom: 24px;
}
.Component-cardcontent-153 {
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
I can edit the pixels in the browser to 0. But I cannot figure out how to target MuiCardContent-root-158:last-child and override paddingBottom in my editor.
Here's the syntax for v3 and v4 (v5 example further down):
const styles = {
cardcontent: {
padding: 0,
"&:last-child": {
paddingBottom: 0
}
}
};
Here's a working example demonstrating this:
import React from "react";
import ReactDOM from "react-dom";
import CardContent from "#material-ui/core/CardContent";
import { withStyles } from "#material-ui/core/styles";
const styles = {
cardcontent: {
padding: 0,
"&:last-child": {
paddingBottom: 0
}
}
};
function App(props) {
return (
<div>
<CardContent
className={props.classes.cardcontent}
style={{ border: "1px solid black" }}
>
<div style={{ border: "1px solid red" }}>My Content</div>
</CardContent>
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
If you look at the CardContent source code, you can find how it defines the default styles:
export const styles = {
/* Styles applied to the root element. */
root: {
padding: 16,
'&:last-child': {
paddingBottom: 24,
},
},
};
This can be helpful in understanding how to override them.
For those using v5 of Material-UI, here's a v5 example (uses styled instead of withStyles):
import React from "react";
import ReactDOM from "react-dom";
import CardContent from "#mui/material/CardContent";
import { styled } from "#mui/material/styles";
const CardContentNoPadding = styled(CardContent)(`
padding: 0;
&:last-child {
padding-bottom: 0;
}
`);
function App(props) {
return (
<div>
<CardContentNoPadding style={{ border: "1px solid black" }}>
<div style={{ border: "1px solid red" }}>My Content</div>
</CardContentNoPadding>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
When setting the padding of Card Content to 0 via a theme override, the following works well:
overrides: {
MuiCardContent: {
root: {
padding: 0,
"&:last-child": {
paddingBottom: 0,
},
},
},
},
Here's the syntax for Mui.V5
<CardContent sx={{ p:0, '&:last-child': { pb: 0 }}}></CardContent>
add !important, it will override the root css
Related
Trying to do a drop-shadow hover effect in react. I thought I'd use inline style attribute so each icon can have a different color when it's hovered over. I'm stuck on how to achieve this. In my IconGrid component I've created an array of objects, each has an image and the image color respectively. Then I map through it and return the individual GridItem component, but I'm stuck as to how I can use the unique color property for the css drop-shadow effect. I'm getting the red lines in my GridItem component because it's clearly not the written correctly. How can I achieve this?
IconGrid Component
import React from "react";
import "./index.scss";
import GridItem from "./GridItem";
import XD from "../../../assets/images/adobe-xd.png";
import PS from "../../../assets/images/adobe-photoshop.png";
import AI from "../../../assets/images/adobe-illustrator.png";
import CSS from "../../../assets/images/css.png";
import GSAP from "../../../assets/images/gsap.png";
import GULP from "../../../assets/images/gulp.png";
import HTML from "../../../assets/images/html.png";
import JS from "../../../assets/images/javascript.png";
import NODE from "../../../assets/images/nodejs.png";
import REACT from "../../../assets/images/react.png";
import WP from "../../../assets/images/wordpress.png";
import PHP from "../../../assets/images/php.png";
const IconGrid = () => {
const icons = [
{ img: XD, color: "#2E001E" },
{ img: PS, color: "#31C5F0" },
{ img: AI, color: "#FF7F18" },
{ img: HTML, color: "#E44D26" },
{ img: CSS, color: "#264DE4" },
{ img: WP, color: "#01579B" },
{ img: PHP, color: "#6181B6" },
{ img: JS, color: "#F7DF1E" },
{ img: GSAP, color: "#8AC640" },
{ img: GULP, color: "#D34A47" },
{ img: NODE, color: "#83CD29" },
{ img: REACT, color: "#61DBFB" },
];
return (
<>
<div className="flex-grid">
{icons.map((icon, idX) => (
<GridItem key={idX} icon={icon} />
))}
</div>
</>
);
};
GridItem Component
import React from "react";
import "./index.scss"
const GridItem = ({ icon }) => {
return (
<div style={{`--color: ${icon.color}`}} className="flex-item">
<img src={icon.img} alt="" />
</div>
);
};
export default GridItem;
And the CSS
.flex-item {
flex-basis: 22.5%;
padding: 2.5rem 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease-in-out;
position: relative;
&:hover {
transition: all 0.4s ease-in-out;
filter: drop-shadow(0 0 20px var(--color)) drop-shadow(0 0 40px var(--color))
drop-shadow(0 0 60px var(--color));
}
img {
max-width: 80px;
height: auto;
}
}
I think you should set your inline style as below, keeping the key: value form.
import React from "react";
import "./index.scss"
const GridItem = ({ icon }) => {
return (
<div style={{'--color': `${icon.color}`}} className="flex-item">
<img src={icon.img} alt="" />
</div>
);
};
export default GridItem;
I need to override the padding inherited from "# .MuiAlert-icon". The inspector from chrome shows
.MuiAlert-icon {
display: flex;
opacity: 0.9;
padding: 7px 0;
font-size: 22px;
margin-right: 12px;
}
I'm trying to override it using the makeStyles from material UI. Here's the code i'm trying.
import Alert from "#material-ui/lab/Alert";
import Icon from "#material-ui/core/Icon";
import { makeStyles } from "#material-ui/core";
const useStyles = makeStyles({
icon: {
overflow: 'visible',
"& .MuiAlert-icon": {
padding: 'none',
}
},
outerTheme: {
}
});
interface idVerifyProps {
status: string;
}
const IDverify = ({ status }: idVerifyProps) => {
const classes = useStyles();
const svgIcon = (
<Icon className={classes.icon}>
<img alt="edit" src="../../../checkIcon.png" />
</Icon>
);
return (
<div >
<Alert severity="error" style={{ backgroundColor: "#E6FFE9",}} icon={svgIcon}>{status}</Alert>
</div>
);
};
export default IDverify;
I don't know where the 7px padding is coming from. I'm assuming its just a default setting for whatever reason with the Icon component. I just need to set the padding to zero.
you need to use classes={{ icon: <your_class> }}
alertIcon: {
padding: 0,
},
return (
<div >
<Alert
severity="error"
style={{ backgroundColor: "#E6FFE9",}}
icon={svgIcon}
classes={{ icon: classes.alertIcon }}
>
{status}
</Alert>
</div>
);
I have a basic landing page with Header , Content and Footer , however the Header is smaller than the Footer (its width) and as a result the page has a Scroll along the X axe.
Here is the Code
https://9mjhi.csb.app/
App.js
import React from 'react';
import './styles.css';
import Header from './components/Header';
import Footer from './components/Footer';
const App = () => {
return (
<>
<Header />
<Footer>
<span>©</span> Some Footer goes here
</Footer>
</>
);
}
export default App;
Footer :
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
style: {
backgroundColor: "#484848",
color: "white",
borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
position: "fixed",
left: "0",
bottom: "0",
height: "60px",
width: "100vw"
},
phantom: {
display: "block",
padding: "20px",
height: "60px",
width: "100vw"
}
}));
function Footer({ children }) {
const classes = useStyles();
return (
<div>
<div className={classes.phantom} />
<div className={classes.style}>{children}</div>
</div>
);
}
export default Footer;
Header :
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1)
},
container: {
display: "flex",
width: "100vw",
justifyContent: "space-evenly",
alignItems: "flex-start",
backgroundColor: "lightblue"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
root: {
width: "100%"
// maxWidth: 500,
},
col: {
flexDirection: "column",
justifyContent: "center",
textAlign: "center",
color: "#fff",
height: "150px"
},
error: {
color: "red",
fontSize: "12px"
}
}));
const Header = () => {
const classes = useStyles();
return (
<>
<div className={classes.container}>
<div className={classes.col}>.... Something goes here</div>
</div>
</>
);
};
export default Header;
How can we fix the scroll on the X axe and the width of the footer (match it to the header) ?
Try using CSS property overflow!
https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp
https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
.body {
overflow-x:hidden
}
edit: this css prop must wrap the whole page
makeStyles-style-7 has fixed positioning and left is zero but you have a 8px margin for your body that's why makeStyles-container-2
also has 8px margin left.
makeStyles-phantom-8 is overflowing because of the padding.
check box-sizing
Try this:
.body {
margin: 0px;
}
.makeStyles-phantom-8 {
box-sizing: border-box;
}
In my file themeConfig.js I have declared some theme variables that I use throughout my app to style various components. I need to use the scrollbar -webkit to persist a scrollbar for certain components. The -webkit styles are long and bulky, so I want to be able to add them to my themeConfig.js file. These scrollbar styles are pseudo-elements and while I can assign them, I haven't been able to figure out how to use them in themeConfig.js.
themeConfig.js
const myTheme = createMuiTheme({
layout: {
header: 64,
sideNav: 45,
mainDivHeight: 250,
...
}
})
export default myTheme
ComponentExample.js
import { makeStyles } from '#material-ui/core'
const ComponentExample = () => {
const classes = useStyles()
return (
<div className={classes.mainDiv}>I'm a div</div>
)
}
const useStyles = makeStyles(theme => ({
mainDiv: {
height: theme.layout.mainDivHeight,
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: 8,
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.2)',
outline: '1px solid slategrey',
borderRadius: 7,
},
}
}))
export default ComponentExample
It would be great if I could stuff this into a variable in my theme file and apply it to a component:
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: 8,
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.2)',
outline: '1px solid slategrey',
borderRadius: 7,
},
But the way theme styles are declared in makeStyles, there is a 1:1 property assignment and I don't know how to gracefully apply a whole style object like that to a component. Any advice is greatly appreciated!
The styles declared in makeStyles are within an object and that object can be constructed in any of the ways JavaScript supports. The way I would handle this is to put the styles that you want to use within a single object in the theme (scrollbarStyles in my example below) and then use object spread syntax in the place where you want to use it within makeStyles.
Here is a working example:
import React from "react";
import {
createMuiTheme,
ThemeProvider,
makeStyles
} from "#material-ui/core/styles";
const myTheme = createMuiTheme({
layout: {
header: 64,
sideNav: 45,
mainDivHeight: 250,
scrollbarStyles: {
overflowY: "scroll",
"&::-webkit-scrollbar": {
width: 8
},
"&::-webkit-scrollbar-track": {
boxShadow: "inset 0 0 6px rgba(0,0,0,0.00)",
webkitBoxShadow: "inset 0 0 6px rgba(0,0,0,0.00)"
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "rgba(0,0,0,.2)",
outline: "1px solid slategrey",
borderRadius: 7
}
}
}
});
const useStyles = makeStyles(theme => ({
mainDiv: {
...theme.layout.scrollbarStyles,
height: theme.layout.mainDivHeight
}
}));
function ComponentExample() {
const classes = useStyles();
return (
<div className={classes.mainDiv}>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
</div>
);
}
export default function App() {
return (
<ThemeProvider theme={myTheme}>
<ComponentExample />
</ThemeProvider>
);
}
I'm using react-styled-components to style some custom components in my React/AntDesign application but the styles are not applied to my application.
When I tried reproducing the component in a clean codesandbox.io project the styles were applied successfully.
While some styled-components in my project do work this doesn't, what could be interfering with styled-components?
Here's the code:
import React from "react";
import "antd/dist/antd.css";
import styled from "styled-components";
import { FaMale, FaFemale, FaChild, FaUserFriends } from "react-icons/fa";
import { MdChildFriendly } from "react-icons/md";
import { Row, Col, Modal, Button } from 'antd';
class App extends React.Component {
state = { visible: false };
showModal = () => {
this.setState({
visible: true,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
ProductBtn = styled.div`
box-shadow: 0 0 15px rgba(0,0,0,0.1);
border: 1px solid #eee;
padding: 16px;
text-align: center;
border-radius: 5px;
cursor: pointer;
background-color: #fff
p {
margin-bottom: 0;
margin-top: 5px;
font-weight: bold;
}
`;
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>New Transaction</Button>
<Modal
title="New transaction"
visible={this.state.visible}
nOk={this.handleCancel}
onCancel={this.handleCancel}
>
<Row gutter={[16, 16]}>
<Col span={8}>
<this.ProductBtn onClick={this.handleProductClicked}>
<FaUserFriends style={{ fontSize: '24px' }} />
<p>Add couple</p>
<small>$70.00</small>
</this.ProductBtn>
</Col>
...
</Row>
</Modal>
</div>
)
}
}
export default App;
This is how it should look and how it looks in CodeSandbox:
This is how it looks in my application, without the widget/button-like styling on the ProductBtn styled component: