Question: specifying a class instead of an id for cssresources?

[alejo4373]

Is it possible to have the cssresource use a class instead of an id?

I want to use storybooks to test if className prop is being passed and properly applied to a component by toggling the style that is being applied via a class css selector.

The code below works, but I find it uncomfortable to use the id property in this way.

export default {
  title: 'React Trix Editor',
  component: ReactTrixRTEInput,
  parameters: {
    cssresources: [
      {
        id: ".tx-rte-with-border",
        code: `<style>.tx-rte-with-border { border: 2px solid blue; }</style>`,
        picked: false
      }
    ]
  },
  decorators: [withCssResources]
};

And, it also looks off (#.<classname>) when rendered

I was expecting to be able to use something like the following: (note class instead of id)

export default {
  title: 'React Trix Editor',
  component: ReactTrixRTEInput,
  parameters: {
    cssresources: [
      {
        class: "tx-rte-with-border",
        code: `<style>.tx-rte-with-border { border: 2px solid blue; }</style>`,
        picked: false
      }
    ]
  },
  decorators: [withCssResources]
};

I'm sorry if this is somewhere in the documentation and I missed it, happy to read it if I'm pointed to it.

[sander-v-bergen]

Hi @alejo4373,

The 'id' is simply the title of that specific 'CSS Resource'. So you could do something like id: "Blue border"

The # behind the checkbox isn't used for stying. I think it's more of a short-hand notation for ID. So changing it as mentioned above would give you something like:

#Blue border
<style>.tx-rte-with-border { border: 2px solid blue; }</style>

[alejo4373]

Thank you, @sander-v-bergen!

[alejo4373]

Also @sander-v-bergen, do you know by any chance how to add the CSSResources tab on a per story basis? Rn it shows on all of them but I only need it one. Thanks in advance!