python - Set background colour for a custom QWidget

Question

I am attempting to create a custom QWidget (from PyQt5) whose background colour can change. However, all the standard methods of setting the background colour do not seem to work for a custom QWidget class

So far I have attempted to change the colour through QSS stylesheet and by setting the palette. This works for a regular QWidget but for some reason not a custom widget.

I have found reference custom QWidgets requiring a paintEvent() function in the C++ documentation https://wiki.qt.io/How_to_Change_the_Background_Color_of_QWidget and an did find one reference to it in Python. However, implementing the linked paintevent fails because QStyleOption does not seem to exist in PyQt5.

Below shows a high level of the QWidget class I created (it also contains a bunch of labels) and the QSS I used for the Widget (style has been set in a parent widget but have tried setting it directly)

class AlarmWidget(QWidget):
    def __init__(self, alarm, parent=None):
        super(AlarmWidget, self).__init__(parent)
        self.setFixedHeight(200)
        self.setProperty("active", True)

        self.setAutoFillBackground(True)
        p = self.palette()
        p.setColor(self.backgroundRole(), PyQt5.QtCore.Qt.red)
        self.setPalette(p)

AlarmWidget {
  background-color: red
}

Overall, no matter what I do, it does not let me set the background colour for the custom QWidget so would really appreciate help

Answer 1

The simplest fix is this:

class AlarmWidget(QWidget):
    def __init__(self, alarm, parent=None):
    ...
    self.setAttribute(QtCore.Qt.WA_StyledBackground, True)
    self.setStyleSheet('background-color: red')

---

This issue happens whenever a stylesheet is applied to a custom widget or to one of its ancestor widgets. To quote from the QWidget.setPalette documentation:

Warning: Do not use this function in conjunction with Qt Style Sheets. When using style sheets, the palette of a widget can be customized using the "color", "background-color", "selection-color", "selection-background-color" and "alternate-background-color".

What this fails to mention, however, is that for performance reasons custom widgets have stylesheet support disabled by default. So to get your example to work properly, you must (1) set the background colour via a stylesheet, and (2) explicitly enable stylesheet support using the WA_StyledBackground widget attribute.

A minimal example that demonstrates this is shown below:

import sys
from PyQt5 import QtCore, QtWidgets

class AlarmWidget(QtWidgets.QWidget):
    def __init__(self, alarm, parent=None):
        super(AlarmWidget, self).__init__(parent)
        self.setFixedHeight(200)
#         self.setAutoFillBackground(True)
#         p = self.palette()
#         p.setColor(self.backgroundRole(), QtCore.Qt.red)
#         self.setPalette(p)
        self.setAttribute(QtCore.Qt.WA_StyledBackground, True)
        self.setStyleSheet('background-color: red')

class Window(QtWidgets.QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.setStyleSheet('background-color: green')
        self.widget = AlarmWidget('')
        layout = QtWidgets.QVBoxLayout(self)
        layout.addWidget(self.widget)

if __name__ == '__main__':

    app = QtWidgets.QApplication(sys.argv)
    window = Window()
    window.setWindowTitle('BG Colour Test')
    window.setGeometry(600, 100, 300, 200)
    window.show()
    sys.exit(app.exec_())

This should show a window containing a red rectangle with a green border, like this:

To test things further, set only the palette in the AlarmWidget class, but without setting a stylesheet in the Window class. This should show a red rectangle with no green border. Finally, set only the stylesheet in both classes - but without the setAttribute line. This should show a plain green rectangle with no inner red rectangle (i.e. the stylesheet on the custom widget is no longer applied).