Setting Background Stylesheet to QWidget shows on all controls

Question

I have set the following CSS to the QWidget Stylesheet:

QWidget { background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #00b7ea, stop: 1 #009ec3); /* Chrome10+,Safari5.1+ */ }

It works fine, but when I put a button or any other control on the canvas, I get the same background colour included in the elements.

Can someone help me fix this.

I've tried using a QFrame but I always get a border around the Frame like this:

Answer 1

When you set a style sheet for a QWidget, the style sheet is applied to that QWidget and the entire child hierarchy of that widget. Since you are using QWidget as a selector, the style will be applied to any QWidget or QWidget subclass. A QPushButton is a subclass of QWidget, so the style rule is applied to it.

There are many ways you could single out just the main QWidget with a selector. In this case, it might be easiest just to use .QWidget which will target only QWidgets and not QWidget subclasses.

If you end up having other QWidgets in the child hierarchy, you can be more selective by identifying the class and objectName property using Classname#objectName.

You should read this section of the Qt docs for more info.