CSS not applied in React component

Using Neos & Flow Neos Plugin Development
1

Hi!

I’m currently trying to implement a custom Editor in Neos, but my styles aren’t applied properly and I have no clue why. I can see that yarn watch correctly places my class inside Public/Plugin.css and it is shown when I inspect the element within the browsers Developer Tools, but the styles are still not applied.

ScheduledSendingEditor.js

import React from 'react'
import RepeatWeeklyEditor from './RepeatWeeklyEditor';

function ScheduledSendingEditor() {
  return (
    <RepeatWeeklyEditor />
  )
}

export default ScheduledSendingEditor;

RepeatWeeklyEditor.js

import React from 'react'
import style from './style.css';

export default function RepeatWeeklyEditor() {

    return (
        <div>
            <span className={style.weeklyRepetition}>Alle <input type="text"/> Wochen am ...</span>
        </div>
    )
}

styles.css

.weeklyRepetition {
    color: red !important;
}

styles
styles1232×119 26.5 KB

I don’t have a lot of experience with React so I wouldn’t exclude a super simple beginners mistake in my code. I’ve looked at other examples on GitHub and couldn’t see any differences on how styles are applied…

2

I got it. I just forgot to add the stylesheets in the Settings.yaml. I’ll leave the thread in case it helps anyone else. :slight_smile:

    stylesheets:
      'xxx.ScheduledSending:ScheduledSendingEditor':
        resource: resource://xxx.ScheduledSending/Public/ScheduledSendingEditor/Plugin.css