I'm using styled-components in a React project an I can't find documentation anywhere on whether or not a styled component will accept inline styles on the "style" property. For example:
The styled Text component
import styled from 'styled-components'
type TextProps = {
content: string
className?: string
id?: string
}
const UnstyledText: React.FC<TextProps> = ({ className, content }) => {
return (
<span
className={className}
>
{content}
</span>
)
}
const Text = styled(UnstyledText)`
font-size: '1vw'
line-height: '2vw'
`
export default Text
The Text component in use:
import styles from './index.module.css'
import Text from '../ui/atoms/Text'
export default function Home() {
return (
<div className={styles['home-page-container']} style={{ display: 'block' }}>
<div style={{ position: 'relative' }}>
<img
src={'/_next/static/media/image.jpg'}
alt={'background'}
width="100%"
/>
<Text
style={{ position: 'absolute', left: '10%', top: '20%' }}
content="Some text i want to position"
/>
</div>
<div
style={{
width: '100%',
padding: '20%',
maxHeight: '75vh',
backgroundColor: '#F5F5F5',
}}
></div>
</div>
)
}
The style={{ position: 'absolute', left: '10%', top: '20%' }} inline styles are not recognized in the browser.
Instead I'm forced to add a "style" prop to the styled component, then spread the object onto the span like so:
const UnstyledText: React.FC<TextProps> = ({ className, content, style }) => {
return (
<span className={className}
style={{ ...style }}
>
{content}
</span>
)
}
If I don't do this, I have to wrap the styled component in a div and add my styles to that div, adding bloat to my project. I don't want to add a "style" prop to every component, nor a wrapper div any time I need additional styles on a component. There has to be a way around this.
Thoughts?