React ignoring CSS class, not IDs-CodePudding

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 >...</div>
            <div >
                <div >...</div>
                <div >...</div>
                <div ></div>
            </div>

What am I missing here?

CodePudding user response：

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'