The idea is to resize a css definition that has been done in css. The css js object looks as :
style: {
textAlign: "left",
fontWeight: "bold",
fontSize: "1.0em",
lineHeight: "12px",
fontFamily: "#{fontFamily}",
color: "#{textColor}",
margin: "0 10px 0 10px",
padding: "7px 0 7px 0",
borderBottom: "1px solid rgba(0, 0, 0, 0.06)",
width: "auto",
height: "30px",
},
Now I would like to zoom all this by a 20% (30px -> 36px, 10px -> 12px, 1.0em -> 1.2em...) . What is the smartest and robust way of doing this ?
Following solution works for values like 1.0em, 30px (number followed by non-numerical value)
Object.keys(styles).forEach( s => {
if( !isNaN(parseInt(styles[s])) )
{
var nonNumericVal = [...(styles[s].match(/[^\d\.]/g, "")|| []) ].join("");
var numValue = styles[s].replace( nonNumericVal, "");
if ( !isNaN( numValue ) )
{
styles[s] = numValue * 120/100 + nonNumericVal;
}
}
})
Demo
var styles = {
textAlign: "left",
fontWeight: "bold",
fontSize: "1.0em",
lineHeight: "12px",
fontFamily: "#{fontFamily}",
color: "#{textColor}",
margin: "0 10px 0 10px",
padding: "7px 0 7px 0",
borderBottom: "1px solid rgba(0, 0, 0, 0.06)",
width: "auto",
height: "30px",
};
Object.keys(styles).forEach(s => {
if (!isNaN(parseInt(styles[s]))) {
var nonNumericVal = [...(styles[s].match(/[^\d\.]/g, "") || [])].join("");
var numValue = styles[s].replace(nonNumericVal, "");
if (!isNaN(numValue)) {
styles[s] = numValue * 120 / 100 + nonNumericVal;
}
}
});
console.log(styles);
Attributes like (padding, margin, background-color, etc) will require more specific logic.
Use CSS zoom.
.zoom {
zoom: 120%;
}
Related
I am trying to design a simple report with the format as shown in the following Figma file using React and Material UI. However, I am encountering a challenge when designing the slanting edges of the divs as shown on the report. Plus the purple border. This is what I have done so far, but it is far from being perfect:
const leftDiv = {
content: "",
position: "absolute",
top: "50%",
right: 0,
width: "100%",
height: "50%",
backgroundColor: 'rgb(255, 255, 255)',
clipPath: "polygon(0 0, 0% 0%, 100% 100%, 0% 100%)"
}
const rightDiv = {
position: "absolute",
bottom: 0,
right: 0,
display: 'inline-block',
width: 0,
height: 0,
borderStyle: 'solid',
borderWidth: '0 0 500px 100vw',
borderColor: 'transparent transparent #FFFFFF transparent',
}
const contentDiv = {
backgroundColor: 'rgb(255, 255, 255)',
width: "100%",
height: "100%",
clipPath: "polygon(100% 0, 100% 0%, 100% 100%, 0% 100%)"
}
const Coverpage = () => {
return (
<Container>
<Grid>
<Paper>
<Box sx={{ position: 'relative', width: '100%' }}>
<CardMedia
component='img'
alt="cover page image"
image='https://unsplash.com/photos/vbxyFxlgpjM'
/>
<Box style={leftDiv}></Box>
<Box style={rightDiv}>
<Box style={contentDiv}>
<Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'flex-end', textAlign: 'right', pr: 8 }}>
<Typography sx={{ fontSize: '24px', mb: 2 }}>Lorem ipsum</Typography>
<Typography sx={{ fontSize: '48px', fontWeight: 'bold', textTransform: 'uppercase', color: '#000133' }}>Lorem ipsum</Typography>
<Typography sx={{ fontSize: '64px', fontWeight: 'bold', textTransform: 'uppercase', color: 'blue' }}>Lorem ipsum</Typography>
</Box>
</Box>
</Box>
</Box>
</Paper>
</Grid>
</Container>
);
}
export default Coverpage;
I found using clipPath as the easiest, even though I would prefer using triangles to design the slanting edges since later, I am planning to use react-pdf-renderer which I am not sure if it supports clipPath in its CSS styling.
I will appreciate a pointer to the right direction.
Dan touched on the purple border. About the slanted div you can use this trick:
.slanted{
height: 0;
width: 0;
border-top: solid 100px transparent;
border-right: solid 50vw blue;
border-left: solid 50vw blue;
border-bottom: solid 100px blue;
}
You're making a div with no height or width. The borders meet along a diagonal line and so you can have a triangle effect.
You can use an additional div for the text
Edit: making the borders responsive
To make the border trick dynamic you can use some JS:
function App() {
const footerRef = React.useRef()
useEffect(() => {
window.addEventListener('resize', setBorders)
return () => {
window.removeEventListener('resize', setBorders)
}
}, [])
useEffect(() => {
if (!footerRef.current) return
setBorders()
}, [footerRef])
const setBorders = () => {
let containerWidth = document.querySelector('.container').clientWidth
let footerStyle = footerRef.current.style
footerStyle.borderRightWidth = containerWidth/2+'px'
footerStyle.borderLeftWidth = containerWidth/2+'px'
}
return (
<div className='App'>
<div className='container'>
<div className='footer' ref={footerRef}>
</div>
</div>
</div>
);
}
export default App
We are adding a 'resize' eventListener to the window that will trigger the setBorders() function. In this function we select the container element and set the width of the footer borders to be half of it.
To make sure the function also fires on initial load I added a useEffect which will fire when the footer is created and its Ref is set. You can also use a callback ref instead.
The css, I assumed the footer will be static height:
.container{
height: 200px;
width: 100%;
background: red;
}
.footer{
position: relative;
height: 0;
width: 0;
top: calc(100% - 100px);
/*border-top width + border-bottom width = 100px*/
border-top: 50px solid transparent;
border-bottom: 50px solid green;
border-right: solid blue;
border-left: solid blue;
}
If you don't mind making the container position: relative; you can then just do:
.footer{
position: absolute;
bottom: 0;
}
You just need to use a simple CSS transform on the element.
transform: skew(-15deg, -15deg);
i am creating a website for my nft collection, with a whitelist sale and a public sale. My problem, once the user is logged in with his metamask account, he should put a check if his wallet is whitelisted. If your wallet belongs to the whitelist, then it appears as a screen and you can proceed with the purchase of the NFT, if your wallet does not belong to the whitelist you will have another screen that you have to pass to buy the NFT. Can someone help me?
import React, { useEffect, useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { connect } from "./redux/blockchain/blockchainActions";
import { fetchData } from "./redux/data/dataActions";
import * as s from "./styles/globalStyles";
import styled from "styled-components";
const truncate = (input, len) =>
input.length > len ? `${input.substring(0, len)}...` : input;
const whitelistedAddresses = ['here the first address', 'here the second address'];
const whitelisted = "Congratulations, you are whitelisted!";
const notWhitelisted = "You are not whitelisted";
export const StyledButton = styled.button`
padding: 10px;
border-radius: 50px;
border: none;
background-color: var(--secondary);
padding: 10px;
font-weight: bold;
color: var(--secondary-text);
width: 100px;
cursor: pointer;
box-shadow: 0px 6px 0px -2px rgba(250, 250, 250, 0.3);
-webkit-box-shadow: 0px 6px 0px -2px rgba(250, 250, 250, 0.3);
-moz-box-shadow: 0px 6px 0px -2px rgba(250, 250, 250, 0.3);
:active {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
`;
export const StyledRoundButton = styled.button`
padding: 10px;
border-radius: 100%;
border: none;
background-color: var(--primary);
padding: 10px;
font-weight: bold;
font-size: 15px;
color: var(--primary-text);
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 4px 0px -2px rgba(250, 250, 250, 0.3);
-webkit-box-shadow: 0px 4px 0px -2px rgba(250, 250, 250, 0.3);
-moz-box-shadow: 0px 4px 0px -2px rgba(250, 250, 250, 0.3);
:active {
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
`;
export const ResponsiveWrapper = styled.div`
display: flex;
flex: 1;
flex-direction: column;
justify-content: stretched;
align-items: stretched;
width: 100%;
#media (min-width: 767px) {
flex-direction: row;
}
`;
export const StyledLogo = styled.img`
width: 200px;
#media (min-width: 767px) {
width: 300px;
}
transition: width 0.5s;
transition: height 0.5s;
`;
export const StyledImg = styled.img`
box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.7);
border: 4px dashed var(--secondary);
background-color: var(--accent);
border-radius: 100%;
width: 200px;
#media (min-width: 900px) {
width: 250px;
}
#media (min-width: 1000px) {
width: 300px;
}
transition: width 0.5s;
`;
export const StyledLink = styled.a`
color: var(--secondary);
text-decoration: none;
`;
function App() {
const whitelistedAddresses = ['0x74be05EDACC9c0CcEb78BC0fCB76315069b6F411', '0x7490ED764e113F9283507E8401b011c8eF8F2Dbe'];
const dispatch = useDispatch();
const blockchain = useSelector((state) => state.blockchain);
const data = useSelector((state) => state.data);
const [claimingNft, setClaimingNft] = useState(false);
const [feedback, setFeedback] = useState(`Click buy to mint your NFT.`);
const [mintAmount, setMintAmount] = useState(1);
const [CONFIG, SET_CONFIG] = useState({
CONTRACT_ADDRESS: "",
SCAN_LINK: "",
NETWORK: {
NAME: "",
SYMBOL: "",
ID: 4,
},
NFT_NAME: "",
SYMBOL: "",
MAX_SUPPLY: 1,
WEI_FREE_MINT_COST: 0,
DISPLAY_FREE_MINT_COST: 0,
WEI_PUBLIC_COST: 0,
DISPLAY_PUBLIC_COST: 0,
GAS_LIMIT: 0,
MARKETPLACE: "",
MARKETPLACE_LINK: "",
SHOW_BACKGROUND: false,
});
const FreeMint = () => {
let freeMintCost = CONFIG.WEI_FREE_MINT_COST;
let gasLimit = CONFIG.GAS_LIMIT;
let totalFreeMintCostWei = String(freeMintCost * mintAmount);
let totalGasLimit = String(gasLimit * mintAmount);
console.log("Cost: ", totalFreeMintCostWei);
console.log("Gas limit: ", totalGasLimit);
setFeedback(`Minting your ${CONFIG.NFT_NAME}...`);
setClaimingNft(true);
blockchain.smartContract.methods
.freeMint(mintAmount)
.send({
gasLimit: String(totalGasLimit),
to: CONFIG.CONTRACT_ADDRESS,
from: blockchain.account,
value: totalFreeMintCostWei,
})
.once("error", (err) => {
console.log(err);
setFeedback("Sorry, something went wrong please try again later.");
setClaimingNft(false);
})
.then((receipt) => {
console.log(receipt);
setFeedback(
`WOW, the ${CONFIG.NFT_NAME} is yours! go visit Opensea.io to view it.`
);
setClaimingNft(false);
dispatch(fetchData(blockchain.account));
});
};
const claimNFTs = () => {
let publicCost = CONFIG.WEI_PUBLIC_COST;
let gasLimit = CONFIG.GAS_LIMIT;
let totalPublicCostWei = String(publicCost * mintAmount);
let totalGasLimit = String(gasLimit * mintAmount);
console.log("Cost: ", totalPublicCostWei);
console.log("Gas limit: ", totalGasLimit);
setFeedback(`Minting your ${CONFIG.NFT_NAME}...`);
setClaimingNft(true);
blockchain.smartContract.methods
.mint(mintAmount)
.send({
gasLimit: String(totalGasLimit),
to: CONFIG.CONTRACT_ADDRESS,
from: blockchain.account,
value: totalPublicCostWei,
})
.once("error", (err) => {
console.log(err);
setFeedback("Sorry, something went wrong please try again later.");
setClaimingNft(false);
})
.then((receipt) => {
console.log(receipt);
setFeedback(
`WOW, the ${CONFIG.NFT_NAME} is yours! go visit Opensea.io to view it.`
);
setClaimingNft(false);
dispatch(fetchData(blockchain.account));
});
};
const decrementMintAmount = () => {
let newMintAmount = mintAmount - 1;
if (newMintAmount < 1) {
newMintAmount = 1;
}
setMintAmount(newMintAmount);
};
const incrementMintAmount = () => {
let newMintAmount = mintAmount + 1;
if (newMintAmount > 10) {
newMintAmount = 10;
}
setMintAmount(newMintAmount);
};
const getData = () => {
if (blockchain.account !== "" && blockchain.smartContract !== null) {
dispatch(fetchData(blockchain.account));
}
};
const getConfig = async () => {
const configResponse = await fetch("/config/config.json", {
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
const config = await configResponse.json();
SET_CONFIG(config);
};
useEffect(() => {
getConfig();
}, []);
useEffect(() => {
getData();
}, [blockchain.account]);
return (
<s.Screen>
<s.Container
flex={1}
ai={"center"}
style={{ padding: 24, backgroundColor: "var(--primary)" }}
image={CONFIG.SHOW_BACKGROUND ? "/config/images/bg.png" : null}
>
<StyledLogo alt={"logo"} src={"/config/images/logo.png"} />
<s.SpacerSmall />
<ResponsiveWrapper flex={1} style={{ padding: 24 }} test>
<s.Container flex={1} jc={"center"} ai={"center"}>
<StyledImg alt={"example"} src={"/config/images/example.gif"} />
</s.Container>
<s.SpacerLarge />
<s.Container
flex={2}
jc={"center"}
ai={"center"}
style={{
backgroundColor: "var(--accent)",
padding: 24,
borderRadius: 24,
border: "4px dashed var(--secondary)",
boxShadow: "0px 5px 11px 2px rgba(0,0,0,0.7)",
}}
>
<s.TextTitle
style={{
textAlign: "center",
fontSize: 50,
fontWeight: "bold",
color: "var(--accent-text)",
}}
>
{data.totalSupply} / {CONFIG.MAX_SUPPLY}
</s.TextTitle>
<s.TextDescription
style={{
textAlign: "center",
color: "var(--primary-text)",
}}
>
<StyledLink target={"_blank"} href={CONFIG.SCAN_LINK}>
{truncate(CONFIG.CONTRACT_ADDRESS, 50)}
</StyledLink>
</s.TextDescription>
<s.SpacerSmall />
{Number(data.totalSupply) >= CONFIG.MAX_SUPPLY ? (
<>
<s.TextTitle
style={{ textAlign: "center", color: "var(--accent-text)" }}
>
The sale has ended.
</s.TextTitle>
<s.TextDescription
style={{ textAlign: "center", color: "var(--accent-text)" }}
>
You can still find {CONFIG.NFT_NAME} on
</s.TextDescription>
<s.SpacerSmall />
<StyledLink target={"_blank"} href={CONFIG.MARKETPLACE_LINK}>
{CONFIG.MARKETPLACE}
</StyledLink>
</>
) : (
<>
<s.TextTitle
style={{ textAlign: "center", color: "var(--accent-text)" }}
>
1 {CONFIG.SYMBOL} costs {CONFIG.DISPLAY_COST}{" "}
{CONFIG.NETWORK.SYMBOL}.
</s.TextTitle>
<s.SpacerXSmall />
<s.TextDescription
style={{ textAlign: "center", color: "var(--accent-text)" }}
>
Excluding gas fees.
{feedback}
</s.TextDescription>
<s.SpacerSmall />
{blockchain.account === "" ||
blockchain.smartContract === null ? (
<s.Container ai={"center"} jc={"center"}>
<s.TextDescription
style={{
textAlign: "center",
color: "var(--accent-text)",
}}
>
Connect to the {CONFIG.NETWORK.NAME} network
</s.TextDescription>
<s.SpacerSmall />
<StyledButton
onClick={(e) => {
e.preventDefault();
dispatch(connect());
getData();
}}
>
CONNECT
</StyledButton>
{blockchain.errorMsg !== "" ? (
<>
<s.SpacerSmall />
<s.TextDescription
style={{
textAlign: "center",
color: "var(--accent-text)",
}}
>
{blockchain.errorMsg}
</s.TextDescription>
</>
) : null}
</s.Container>
) : (
<>
<s.TextDescription
style={{
textAlign: "center",
color: "var(--accent-text)",
}}
>
</s.TextDescription>
<s.SpacerMedium />
<s.Container ai={"center"} jc={"center"} fd={"row"}>
<StyledRoundButton
style={{ lineHeight: 0.4 }}
disabled={claimingNft ? 1 : 0}
onClick={(e) => {
e.preventDefault();
decrementMintAmount();
}}
>
-
</StyledRoundButton>
<s.SpacerMedium />
<s.TextDescription
style={{
textAlign: "center",
color: "var(--accent-text)",
}}
>
{mintAmount}
</s.TextDescription>
<s.SpacerMedium />
<StyledRoundButton
disabled={claimingNft ? 1 : 0}
onClick={(e) => {
e.preventDefault();
incrementMintAmount();
}}
>
+
</StyledRoundButton>
</s.Container>
<s.SpacerSmall />
<s.Container ai={"center"} jc={"center"} fd={"row"}>
<StyledButton
disabled={claimingNft ? 1 : 0}
onClick={(e) => {
e.preventDefault();
FreeMint();
getData();
}}
>
{claimingNft ? "BUSY" : "BUY"}
</StyledButton>
</s.Container>
</>
)}
</>
)}
<s.SpacerMedium />
</s.Container>
<s.SpacerLarge />
<s.Container flex={1} jc={"center"} ai={"center"}>
<StyledImg
alt={"example"}
src={"/config/images/example.gif"}
style={{ transform: "scaleX(-1)" }}
/>
</s.Container>
</ResponsiveWrapper>
<s.SpacerMedium />
<s.Container jc={"center"} ai={"center"} style={{ width: "70%" }}>
<s.TextDescription
style={{
textAlign: "center",
color: "var(--primary-text)",
}}
>
Please make sure you are connected to the right network (
{CONFIG.NETWORK.NAME} Mainnet) and the correct address. Please note:
Once you make the purchase, you cannot undo this action.
</s.TextDescription>
<s.SpacerSmall />
<s.TextDescription
style={{
textAlign: "center",
color: "var(--primary-text)",
}}
>
We have set the gas limit to {CONFIG.GAS_LIMIT} for the contract to
successfully mint your NFT. We recommend that you don't lower the
gas limit.
</s.TextDescription>
</s.Container>
</s.Container>
</s.Screen>
);
}
export default App;
I have a MUI styled component that renders a green circular badge.
const StyledGreenBadge = styled(Badge)(({ theme }) => ({
'& .MuiBadge-badge': {
backgroundColor: '#44b700',
color: '#44b700',
width: '15px',
height: '15px',
borderRadius: '100%',
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
'&::after': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
borderRadius: '50%',
animation: 'ripple 1.2s infinite ease-in-out',
border: '1px solid currentColor',
content: '""',
},
},
'#keyframes ripple': {
'0%': {
transform: 'scale(.8)',
opacity: 1,
},
'100%': {
transform: 'scale(2.4)',
opacity: 0,
},
},
}));
Now, I want my code to be DRY, so I want to create a StyledYellowBadge.
All I have to do is somehow just change the color property of StyledGreenBadge.
Yet, I could not figure out how for 3 hours.
I have tried something like this:
color: { desiredColor === 'yellow' ? 'yellow' : #44b700'},
where desiredColor is a second argument, after
{ theme }
How can I make achieve this?
You can add custom properties to your styled MUI component by describing the type:
const StyledGreenBadge = styled(Badge)<{ badgeColor?: string }>(
Then, you can pass described property (badgeColor in this case) to your styled Badge component:
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
and assign it to the property you want:
backgroundColor: props.badgeColor ?? "#44b700",
Full code:
const StyledGreenBadge = styled(Badge)<{ badgeColor: string }>(
({ theme, ...props }) => {
console.log(props);
return {
"& .MuiBadge-badge": {
backgroundColor: props.badgeColor ?? "#44b700",
color: "#44b700",
width: "15px",
height: "15px",
borderRadius: "100%",
boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
"&::after": {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
borderRadius: "50%",
animation: "ripple 1.2s infinite ease-in-out",
border: "1px solid currentColor",
content: '""'
}
},
"#keyframes ripple": {
"0%": {
transform: "scale(.8)",
opacity: 1
},
"100%": {
transform: "scale(2.4)",
opacity: 0
}
}
};
}
);
export default function SimpleBadge() {
return (
<StyledGreenBadge badgeColor="red" badgeContent={4} color="primary">
<MailIcon color="action" />
</StyledGreenBadge>
);
}
Demo
I'm struggling to make a perfect triangle button instead of a pizza slice button on a slider in Material UI and ReactJS, this is the task I want to complet exemple bellow:
And this is where I'm currently at:
//App
const CustumSlider = withStyles({
root: {
color: "transparent",
height: 2,
padding: '15px 0',
},
thumb: {
boxShadow: iOSBoxShadow,
marginLeft: -16,
width: 0,
height: 0,
borderLeft: "16px solid transparent",
borderRight: "16px solid transparent",
borderBottom: "16px solid #f39200",
cursor: "pointer",
marginTop: "9px",
'&:focus, &:hover, &$active': {
color: "transparent",
boxShadow: iOSBoxShadow,
'#media (hover: none)': {
boxShadow: iOSBoxShadow,
},
},
},
valueLabel: {
left: '-16px',
top: -25,
fontSize: 16,
fontFamily: "Nunito",
fontWeight: 700,
'& *': {
background: 'transparent',
color: '#f39200',
},
},
track: {
height: 15,
borderTopLeftRadius: "5px",
borderBottomLeftRadius: "5px",
color: "#003865",
},
rail: {
height: 15,
opacity: 0.5,
borderTopLeftRadius: "5px",
borderBottomLeftRadius: "5px",
borderTopRightRadius: "5px",
borderBottomRightRadius: "5px",
backgroundColor: "rgba(0, 0, 0, 0.4)",
},
mark: {
backgroundColor: '#bfbfbf',
height: 8,
width: 1,
marginTop: -3,
},
markActive: {
opacity: 1,
backgroundColor: 'currentColor',
},
})(Slider);
Is there any solution to getting a triangle button in the slider?
Just add
borderRadius: "0px",
to the thumb style
sandbox
EDIT: after further testing it seems that each time the component is re-rendered material-ui's makeStyles is executed again, while JSS's createUseStyles is NOT!
I have a component that has to dynamically change the styling based on the state. When I use makeStyles provided with material-ui the code works perfectly:
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
root: {
position: "relative",
borderRadius: filteredItems.length > 0 ? "4px 4px 0 0" : "4px 4px 4px 4px", // this is the relevant line
backgroundColor: "white",
color: "black",
},
}));
But I don't want to use material-ui, I just want to use JSS. Unfortunately it doesn't work. It looks like filteredItems.length > 0 always returns false, so I guess that createUseStyles for some reason is executed differently than makeStyles:
import { createUseStyles } from "react-jss";
const useStyles = createUseStyles(theme => ({
root: {
position: "relative",
borderRadius: filteredItems.length > 0 ? "4px 4px 0 0" : "4px 4px 4px 4px", // this is the relevant line
backgroundColor: "white",
color: "black",
},
}));
I know that material-ui runs under the hood JSS so I'm puzzled by this behaviour. I thought about adding two CSS classes and toggle them within my JSX, but I think sorting out the issue in the styling is the cleanest solution here. Anyone knows why this is happening or how to fix the issue?
EDIT2: To fix the issue I simply created two classes and toggled them within JSX:
const useStyles = createUseStyles(() => {
return ({
root: {
position: "relative",
borderRadius: "4px 4px 4px 4px",
backgroundColor: "white",
color: "black",
},
withItems: {
borderRadius: "4px 4px 0 0",
},
})
});
And then:
<div className={filteredItems.length > 0 ? `${classes.root} ${classes.withItems}` : classes.root}>
Have you tried this approach?
const useStyles = makeStyles({
root: {
position: "relative",
backgroundColor: "white",
color: "black",
borderRadius: props.withItems ? "4px 4px 0 0" : "4px 4px 4px 4px",
// or
// borderRadius: "4px 4px 4px 4px",
// borderRadius: props.withItems && "4px 4px 0 0",
color: props => props.color,
},
});
render() {
const classes = useStyles({ withItems: filteredItems.length > 0 });
return <div className={classes.root} />;
}