CSS Stylesheet is not applied to custom QWidget

Question

What I'm trying to do is to apply custom CSS to a custom widget deriving from QLabel but I'm having no luck.

I have the custom class defined as:

class CustomLabel : public QLabel {

}

I've not re-implemented the paintEvent function as I thought that given that the standard QLabel supports CSS stylesheets, I would just need to refer to this new widget in CSS, for example:

CustomLabel {
    background-color: #111111;
    font-size: 18px;
    font-weight: bold;
}

Unfortunately at run-time, no style is applied the CustomLabel and the default QLabel style is applied.

Can anyone suggest why my CSS rules are being ignored for CustomLabel?

Steps to Recreate

Create a Qt Widgets project using Qt Creator
Add a custom class derived from QLabel and call it CustomLabel
Add a QLabel onto a form using the designer
Promote the label to a CustomLabel class
Apply the stylesheet using the following code in main.cpp:
```
a.setStyleSheet("CustomLabel {font-weight: bold;}");
```
Run the program and notice how CustomLabel is not styled in accordance with the CSS style.

If you CustomLabel has namespace, you need to add that namespace to your css. Refer this question: https://stackoverflow.com/questions/26206492/qt-stylesheet-in-derived-class-in-c-namespace-selector — pat, Sep 07 '17 at 10:29

m7913d · Answer 1 · 2017-09-07T13:04:49.377

1

You should use the macro Q_OBJECT inside your CustomLabel definition, otherwise CustomLabel is not known to Qt's type system:

class CustomLabel : public QLabel {
    Q_OBJECT
}

MCVE

CustomLabel.h:

#include "QLabel"
class CustomLabel : public QLabel {
  Q_OBJECT
};

main.cpp:

#include "QApplication"
#include "CustomLabel.h"
int main(int argc, char * argv[])
{
  QApplication a(argc, argv);
  a.setStyleSheet("CustomLabel {font-weight: bold; background-color: red;}");

  CustomLabel label;
  label.setText ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua");
  label.show ();

  a.exec ();
}

edited Sep 07 '17 at 13:04

answered Sep 07 '17 at 11:26

m7913d

10,244
7
28
56

Unfortunately I've already tried this and it made no difference. – weblar83 Sep 07 '17 at 12:53
I have added a [mcve]. This works for me using Qt 5.9. – m7913d Sep 07 '17 at 13:05
Hmm, interesting - I'm using 5.9.1 and it doesn't work for me. I've done a `clean`, run `qmake` and `build` – weblar83 Sep 07 '17 at 13:07

score 1 · Answer 2 · answered Mar 08 '18 at 18:04

1

Try settings Qt::WA_StyledBackground attribute for your custom label.

answered Mar 08 '18 at 18:04

mentalmushroom

2,261
1
26
34

score 0 · Answer 3 · answered Sep 07 '17 at 10:33

0

Ok, so I've managed to find a "workaround" rather than a proper answer: use the accessibleName parameter.

So in Qt Creator, assign a value such as CustomLabel to the accessibleName field of the QLabel and in the CSS file, add the following:

QLabel[accessibleName="CustomLabel"] {
    font-size: 11px;
}

answered Sep 07 '17 at 10:33

weblar83

681
11
32

accessibleName is a property of QWidget. It can be changed. http://doc.qt.io/qt-5/qwidget.html#accessibleName-prop – pat Sep 07 '17 at 10:42

score 0 · Answer 4 · answered Mar 31 '22 at 12:22

As pat mentioned above in a short comment, you have to look out for your namespaces too, and mark them in the CSS file. In your case the CSS snippet should look like follows if the class is embedded in the UI namespace:

UI--CustomLabel {
    background-color: #111111;
    font-size: 18px;
    font-weight: bold;
}

CSS Stylesheet is not applied to custom QWidget

4 Answers4

Linked

Related