I'm currently facing an issue with my code where I want the Box to stay highlighted with a black border when clicked. Here's the snippet:
interface BigButtonProps {
onClick(): void;
Title: string;
Description?: string;
startIcon?: React.ElementType;
}
const BigButton: FC<BigButtonProps> = (props: BigButtonProps, { active }) => {
const [isClicked, setClicked] = useState(false);
const clickMe = () => {
setClicked(!isClicked);
console.log("say hello");
};
const SvgIconStyles: CSS.Properties = {
display: "block",
};
const BoxStyles: CSS.Properties = {
border: "1.5px solid black",
};
const BoxStylesActive: CSS.Properties = {
border: "1.5px solid black",
};
return (
<Box
sx={{
height: {
xs: "45px",
md: "100px",
},
width: {
xs: "45px",
md: "300px",
},
borderRadius: "10px",
boxShadow: "0 2px 3px 2px rgba(0, 0, 0, .125)",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
":hover": {
border: "1.5px solid blue",
},
}}
className={classNames("BoxStyles", { BoxStylesActive: isClicked })}
onClick={() => {
clickMe();
}}
>
<Typography variant="h1">{props.Title}</Typography>
<Typography variant="subtitle1">{props.Description}</Typography>
<SvgIcon
component={CheckCircleIcon}
sx={{
display: "block",
}}
/>
</Box>
);
};
export default BigButton;
My challenge is that although the border color changes to solid black upon clicking due to CSS active, it doesn't remain that way. I tried conditionally applying CSS by creating methods with the property type CSS.Properties in TypeScript for this react component, but it's not working as expected. Any insights on what might be going wrong here?