🧩 Plasmo Developers•2y ago

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():

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.

3 Replies

tbrockman•2y ago

I also just ran into this yesterday when migrating some components and would appreciate the same 👀

lab•2y ago

Looking for community contribution :)

tbrockman•2y ago

If it isn't built by the time I have time to look into it I will try my best 😛

Gaming

Programming

CSUI Styling React components without getStyle() on each component