0
votes

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?