fix: update styled component props to use dollar sign prefix for consistency

This commit is contained in:
suyao 2025-05-09 22:19:35 +08:00
parent 34c49b84f6
commit 6364f4c006
No known key found for this signature in database

View File

@ -147,9 +147,9 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
</StickyWrapper> </StickyWrapper>
<CodeContent <CodeContent
ref={codeContentRef} ref={codeContentRef}
isShowLineNumbers={codeShowLineNumbers} $isShowLineNumbers={codeShowLineNumbers}
isUnwrapped={isUnwrapped} $isUnwrapped={isUnwrapped}
isCodeWrappable={codeWrappable} $isCodeWrappable={codeWrappable}
// dangerouslySetInnerHTML={{ __html: html }} // dangerouslySetInnerHTML={{ __html: html }}
style={{ style={{
padding: '1px', padding: '1px',
@ -272,7 +272,7 @@ const CodeBlockWrapper = styled.div`
position: relative; position: relative;
` `
const CodeContent = styled.div<{ isShowLineNumbers: boolean; isUnwrapped: boolean; isCodeWrappable: boolean }>` const CodeContent = styled.div<{ $isShowLineNumbers: boolean; $isUnwrapped: boolean; $isCodeWrappable: boolean }>`
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
.shiki { .shiki {
padding: 1em; padding: 1em;
@ -285,13 +285,13 @@ const CodeContent = styled.div<{ isShowLineNumbers: boolean; isUnwrapped: boolea
.line { .line {
display: block; display: block;
min-height: 1.3rem; min-height: 1.3rem;
padding-left: ${(props) => (props.isShowLineNumbers ? '2rem' : '0')}; padding-left: ${(props) => (props.$isShowLineNumbers ? '2rem' : '0')};
} }
} }
} }
${(props) => ${(props) =>
props.isShowLineNumbers && props.$isShowLineNumbers &&
` `
code { code {
counter-reset: step; counter-reset: step;
@ -311,8 +311,8 @@ const CodeContent = styled.div<{ isShowLineNumbers: boolean; isUnwrapped: boolea
`} `}
${(props) => ${(props) =>
props.isCodeWrappable && props.$isCodeWrappable &&
!props.isUnwrapped && !props.$isUnwrapped &&
` `
code .line * { code .line * {
word-wrap: break-word; word-wrap: break-word;