使用Typescript有条件地应用在React JS中不起作用的css

Question

我有以下代码，而onclick我应该使框保持突出显示黑色边框。

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;

当我点击按钮时，它应该将边框颜色更改为纯黑色。当我激活CSS时，它会在点击时改变，但不会一直变成黑色。所以我必须有条件地应用CSS所以我创建了CSS方法属性类型为CSS。properties;我正在使用typescript，这是我正在使用的react组件。我不太确定我做错了什么?

Answer 1

你可以试试

<Box styles={isClicked ? BoxStylesActive : BoxStyles}>
// ...

注意，BoxStylesActive和BoxStyles在您粘贴的代码中是相同的。所以，如果你没有看到任何变化，不要感到惊讶。

<Box sx={{border: isClicked ? "1.5px solid black" : none}}>
// ...

也可以使用

你在这里混合了六种道具和风格。还你BoxStylesActive是一个对象,没有css类。因此，使用classNames()不会对其产生影响。