QWidget overrides Qscrollarea CSS

Question

I'm trying to implement a complex UI in QT with a lot of customization.

This is what I'm trying to achieve (photoshop file)

This is my current screen, I just discovered that the original CSS sheet which was developed by someone had a global color setting for Qwidget, this color is being rendered in a lot of widgets, but the problem is that it's overiding the Scroll, which prevents me from changing the color on the left side (please see the blue dot)

The code for this is:

QWidget {
    background-color: #1a1d21; /* software canvas background color  */
    border: 0px solid black;
}

QScrollArea {
    background-color: #262a30;
    border: 1px solid black;
}

I tried removing the color code in the CSS for QWidget which effected Qscrollarea and the color chosen was properly rendered, but some problems came up:

1. It removed color for a lot of widgets that I had and now it's all white, now I will have to specify individually which worries me, because it's not just time consuming considering the size of my application but also because it sometimes it doesn't work.

2. What also worries me is that I tried specifying background color to the specific widget and it didn't work, I've tried the placeholder object and class together and separated - QDockWidget / QDockWidget and also the real widget that is being called : QTabWidget / tabWidget. So I don't know whether it's because I'm doing something wrong in the code and not using still the correct object to change the color or if Qwidget is actually overriding the color (which makes me confused because I thought that child always overrides parent in CSS)

Note: I'm a designer and newbie in Qt and programming.

Answer 1

For every Qt widget you can provide an unique name. Then you can use that name to setup the desired widget style in the stylesheet (CSS)

If you're not using Qt Creator, widget name can be set using i.e. QWidget::setObjectName("scrollArea");