React ignoring CSS class, not IDs

Question

I am very new to React, so I might be asking something really trivial, but after a while, it seems to me dark magic that I can't make something as simple as applying a style work properly.

I am following this tutorial, something easy. Until I get to the point where I need to apply styles. React consistently ignores all my styles.

The CSS I am using is straightforward, I changed also the background of the body to see if it works, but it is ignored:

*, *::before, *::after {
    box-sizing: border-box;
};

body {
    background-color: #ffa3a3; /*#f3f3f3;*/
    margin: 100px;
}

.container.ql-editor {
    margin-left: 10%;
    margin-right: 10%;
}

Whereas the text editor JS file is almost like the tutorial:

import React, { useCallback } from 'react'
import Quill from 'quill'
import "quill/dist/quill.snow.css"
// import "./styles.css";

export default function TextEditor() {
  const wrapperRef = useCallback((wrapper) => {
    if (wrapper == null) return;

    wrapper.innerHTML = "";
    const editor =  document.createElement("div");

    wrapper.append(editor);
    new Quill(editor,  { theme: "snow" });
  }, []);
 
  return (
    <div id="container" ref={wrapperRef}></div>
  )
}

As you can see, out of desperation, I added the import of the CSS everywhere without any results. Also, changing to <div className="container" ref={wrapperRef}></div> does not help.

But I see that IDs work:

#container {
    margin-left: 10%;
    margin-right: 10%;
}

I have tried all the combination of classes, since the QuillJS version I have has a different HTML generation from the tutorial, in my version the outline of the HTML is:

<body>
    <div id="root">
        <div id="container">
            <div class="ql-toolbar ql-snow">...</div>
            <div class="ql-container ql-snow">
                <div class="ql-editor ql-blank">...</div>
                <div class="ql-clipboard">...</div>
                <div class="ql-tooltip ql-hidden"></div>
            </div>

What am I missing here?

Alex is correct on the styling. Also, in JSX, you can’t use the word class. You have to use className instead. JSX gets translated into JS, and class is a reserved word in JS. — David
– David, Commented Sep 28, 2022 at 16:54

Alex Gourlay · Accepted Answer · 2022-09-28 17:00:03Z

2

Add a space between .container and .ql-editor

.container .ql-editor {
    margin-left: 10%;
    margin-right: 10%;
}

Without the space, the selector targets all elements with both 'container' and 'ql-editor' class.

With the space, the selector targets all elements with class 'ql-editor' that are descendents of an element with class 'container'

edited Sep 28, 2022 at 17:00

answered Sep 28, 2022 at 16:45

Alex Gourlay

3951 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

senseiwa Over a year ago

Oh man, that solved it! So a space is an OR... well, I might have never found out. Thank you!

Alex Gourlay Over a year ago

Happy to have helped. A space is not quite an OR though. You can read more on it here: w3schools.com/css/css_combinators.asp

senseiwa Over a year ago

Thanks, I now see better how it works!

Collectives™ on Stack Overflow

React ignoring CSS class, not IDs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related