How to set global style sheets to custom widgets?

Question

In the main window I can set CSS styles for different standard widgets:

setStyleSheet("QComboBox { background-color: red; } QLabel { background-color: blue; }")

These styles will be applied in child widgets with those names.

But is it possible to set styles for widgets defined by me in the same fashion?

Then this widget should obtain its style by its class name. I can't seem to find corresponding function that would obtain the style sheet by class name.

Here is an example.

---custom-widget.h---

#include <QWidget>

class MyCustomWidget : public QWidget {
  Q_OBJECT
public:
  MyCustomWidget(QWidget *parent) : QWidget(parent) { }
};

---main.cpp---

#include <QApplication>
#include <QWidget>
#include <QLayout>
#include <QLabel>
#include "custom-widget.h"

int main(int argc, char **argv) {
  QApplication   app (argc, argv);
  QWidget        mainWindow;
  QVBoxLayout    mainLayout(&mainWindow);
  QLabel         label("I am a label", &mainWindow);
  MyCustomWidget customWidget(&mainWindow);

  mainLayout.addWidget(&label);
  mainLayout.addWidget(&customWidget);
  customWidget.setMinimumSize(100, 300);

  mainWindow.setStyleSheet(
    "QLabel { background-color: #5ea6e3; }"
    "MyCustomWidget { background-color: #f00000; }"
  );

  mainWindow.show();

  return app.exec();
}

---main.pro---

CONFIG += qt
QT += core gui widgets
TEMPLATE = app
TARGET = main

HEADERS = main.h custom-widget.h
SOURCES = main.cpp

If you need to specify setStyleSheet by class name, then @Toby Speight indicated the correct answer — Vahagn Avagyan
Or you need to specify in each constructors your setStyleSheet — Vahagn Avagyan
mainWindow.setStyleSheet( "QLabel { background-color: #5ea6e3; }" "MyCustomWidget { background-color: #f00000; }" ); After that you will lose steyle on MyCustomWidget — Vahagn Avagyan
Ah, I think the problem is that you're trying to set a background colour on a QWidget with no contents. Unless you actually use the background colour, you won't see any visual effect. — Toby Speight
Toby, setting stylesheet in the custom widget setStyleSheet("background-color:white;"); changes the color without "using" it. Why wouldn't main-window sheet change it the same way? I don't think the feature I asked in OP works in Qt. — Flying Jay

Toby Speight Toby Speight · Accepted Answer · 2017-07-21T11:18:29

Yes, styles will work just fine on your own widgets.

If you have non-standard properties you want to set, you'll need to declare them using Q_PROPERTY. For example:

class MyWidget : public QWidget
{
     Q_OBJECT
     Q_PROPERTY(QString extra READ extra WRITE setExtra)
     //...
};

You can then style it:

MyWidget {
 background-color: blue;
 color: yellow;
 qproperty-extra: "Some extra text";
}

For the widget in your code sample, the background is never drawn. Its constructor needs to be changed to ask Qt to draw the background using the style information:

MyCustomWidget(QWidget *parent) : QWidget(parent) {
    setAttribute(Qt::WA_StyledBackground);
}

How to set global style sheets to custom widgets?

2 Answers