How to use the concept of conditional classes in className when using mui v5 and styled components - material-ui

Question

I'm aware that mui v5 is now using styled components but wanted to understand how to use the concept of conditional classes className={clsx(isRed && classes.bar)} when using styled components? How would the following example be best written with styled components?
mui v4 example using makeStyles:
import React from "react";
import clsx from "clsx";
import { makeStyles } from "#material-ui/core";
const useStyle = makeStyles({
bar: {
color: "red"
}
});
export const Foo: React.FC<{ isRed?: boolean }> = ({ isRed }) => {
const classes = useStyle();
return <div className={clsx(isRed && classes.bar)}>Hello World</div>;
};

Answer 1

You create a styled component:
import { styled } from "#mui/system";
// this will generate classNames and will assign to the div
const MainContainer = styled("div")({
position: "absolute",
borderRadius: "*px",
....
});
create conditional style objects:
const fullScreen = {
width: "100%",
height: "100vh",
};
const minScreen = {
width: "30%",
height: "40vh",
};
returned jsx
return (
<MainContainer
style={ifConditionTrue ? minScreen : fullScreen}
>
{children}
</MainContainer>
);

Answer 2

I am not sure if you asked for this but you can do these kind of things with conditions.
const useStyle = makeStyles({
departmentAddButton: {
position: "absolute",
maxHeight: 40,
minHeight: 0,
height: 33,
width: 100,
backgroundColor: "#404040", },
departmentAddButtonNoAbsolute: {
maxHeight: 40,
minHeight: 0,
height: 55,
width: 155,
backgroundColor: "#fff",
},
});
const foo = false;
className={clsx({
[classes.userAddButton]: foo === true,
[classes.departmentAddButton]: foo === false,
})}