3 replies

CSUI Styling React components without getStyle() on each component

Long time no see! I haven't been keeping up lately with Plasmo, I'm surprised with how much it has changed over a few months. Congratulations in the progress!

That said, I'd love to know if there's still no way to style content scripts by just importing the style files in each individual component. Something like this, without using

getStyle()

getStyle()

import React from "react"
import "./example-styles.scss"

const ExampleComponent = () => {
  return (
    <h1 className="example-styles__component">
        I should be red!
    </h1>
  )
}

export default ExampleComponent

import React from "react"
import "./example-styles.scss"

const ExampleComponent = () => {
  return (
    <h1 className="example-styles__component">
        I should be red!
    </h1>
  )
}

export default ExampleComponent

/* example-styles.scss*/

.example-styles {
  &__component {
    color: red;
  }
}

/* example-styles.scss*/

.example-styles {
  &__component {
    color: red;
  }
}

This doesn't seem to work inside the Shadow DOM yet, and the stylesheet only applies if I load the content script outside of the Shadow DOM, which brings issues with styles conflicting with the site. I'm wondering if there's still no easy way to make this work.

�PD

🧩 Plasmo Developers•3y ago•

3 replies

Karstodes

CSUI Styling React components without getStyle() on each component

getStyle()

getStyle()

import React from "react"
import "./example-styles.scss"

const ExampleComponent = () => {
  return (
    <h1 className="example-styles__component">
        I should be red!
    </h1>
  )
}

export default ExampleComponent

import React from "react"
import "./example-styles.scss"

const ExampleComponent = () => {
  return (
    <h1 className="example-styles__component">
        I should be red!
    </h1>
  )
}

export default ExampleComponent

/* example-styles.scss*/

.example-styles {
  &__component {
    color: red;
  }
}

/* example-styles.scss*/

.example-styles {
  &__component {
    color: red;
  }
}

CSUI Styling React components without getStyle() on each component

Similar Threads

CSUI Styling React components without getStyle() on each component

Similar Threads

Similar Threads

Similar Threads