我有一個<DiscoverButton> React組件，它有一些樣式，并在點擊時做一些事情。我正在使用風格化的組件進行風格化。我需要創建一個<ReturnButton>React Component，它將幾乎是相同的，唯一的區別是寬度。
DiscoverButton.tsx
export const BigButton = styled。 button`。
寬度：100%。
高度: 3.5rem;
背景顏色: var(--lighter-black);
border: none;
border-radius: 0.4rem;
color: var(--cultured-white);
過渡：背景色0.7s，顏色0.7s。
& :hover {
背景色：透明。
邊界。2px solid var(--lighter-black);
顏色: var(--lighter-black);
}
`。
export const DiscoverButton: React. FC<Props> = ({ children, ...props }) => /span> {
return (
<BigButton onClick={（） => // do smth with props >。
{children}
</BigButton>
);
};
而這里就是我糾結的地方。
ReturnButton.tsx：
const ReturnButtonStyled = styled（DiscoverButton）`
寬度：7%。
`。
export const ReturnButton: React. FC<Props> = ({ children, ...props }) => /span> {
return (
<ReturnButtonStyled id={props. id} btnTitle={props.btnTitle}>
{孩子}
</ReturnButtonStyled>/span>
);
uj5u.com熱心網友回復：
你應該將className道具傳遞給渲染的風格化組件。
export const DiscoverButton: React. FC<Props> = ({ children, className, ...props }) => /span> {
return (
<BigButton。
className={className}。
onClick={() => //對道具做一些事情
>
{children}
</BigButton>
);
};
更新
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/320736.html
標籤：
上一篇：當超鏈接行為是由例如HTML按鈕的"點擊"事件處理虛擬創建的，如何防止打開一個新的標簽或視窗？
下一篇：顫振不能改變變數的值