StyleSheet not applying when a child is declared
-
Hi,
As a new developer using Qt, I've tried to create a simple Login app.
At the beginning evrything was ok but at the moment i've tried to set some style to my components everyting went wrong
To better understand an reproduce my issue here is my setup
Im' trying to create an app using only c++ (no .ui nor .qrc file)
I want the app to be compile using CMakeSo here is my problem, I've create an simple app which has :
a main which create the app and create a GlobalContainer (personnal class we will see right after)#include <iostream> #include <QtCore/QtCore> #include <QtGui/QtGui> #include <QtWidgets/QApplication> #include <QtWidgets/QPushButton> #include <QtWidgets/QGroupBox> #include "GlobalContainer.hpp" int main(int argc, char *argv[]) { int width = 800; int height = 600; /* gets size passed as parameter or set it to screen size */ QApplication app(argc, argv); GlobalContainer container(width, height); /* I want to use a file to set my style this is why i apply it to the app directly */ app.setStyleSheet( "GlobalContainer {\ background-color: #000000;\ }\ GlobalContainer:hover {\ background-color: #ffffff;\ }" ); container.show(); return (app.exec()); }
the GlobalContainer which is a class inherited from QWidget
(Header)#ifndef GLOBAL_CONTAINER_HPP_ #define GLOBAL_CONTAINER_HPP_ #include <QtWidgets/QWidget> #include "pages/Login.hpp" class GlobalContainer : public QWidget { Q_OBJECT public: GlobalContainer(int width = 800, int height = 600, QWidget *parent = nullptr); ~GlobalContainer(); protected: private: // QPushButton button; }; #endif
(Content)
#include "GlobalContainer.hpp" #include <QtCore/QtCore> GlobalContainer::GlobalContainer(int width, int height, QWidget *parent): QWidget(parent) // , button(this) { setWindowTitle(QCoreApplication::translate("GlobalContainer", "MyApp", nullptr)); setObjectName(QString::fromUtf8("MainWidget")); resize(width, height); // This was my first test where i apply style to each of my compnents individualy // This did not worked either // setStyleSheet( // "GlobalContainer {\ // background-color: #000000;\ // }\ // GlobalContainer:hover {\ // background-color: #ffffff;\ // }" // ); } GlobalContainer::~GlobalContainer() { }
With this configuration the Ui gets White when i hover it and it gets back when my mouse is not
The issue comes when i uncommentQPushButton button; // in header file , button(this) // in cpp file
There the background doesn't gets black anymore just like if there was no Style Sheet applied.
After some research on QtCreator and after testing i've found out that if i add a QWidget (let's call it layerWidget) as a child of
GlobalContainer, set this layerWidget as parent of button and apply some Style Sheet to layerWidget , this will result into a layerWidget having some style, but still GlobalContainer does not.Here are the source files for this test :
main.cpp#include <iostream> #include <QtCore/QtCore> #include <QtGui/QtGui> #include <QtWidgets/QApplication> #include <QtWidgets/QPushButton> #include <QtWidgets/QGroupBox> #include "GlobalContainer.hpp" int main(int argc, char *argv[]) { int width = 800; int height = 600; /* gets size passed as parameter or set it to screen size */ QApplication app(argc, argv); GlobalContainer container(width, height); container.init(); /* I want to use a file to set my style this is why i apply it to the app directly */ app.setStyleSheet( "GlobalContainer {\ background-color: #000000;\ }\ GlobalContainer:hover {\ background-color: #ffffff;\ }" ); container.show(); return (app.exec()); }
GlobalContainer.hpp
#ifndef GLOBAL_CONTAINER_HPP_ #define GLOBAL_CONTAINER_HPP_ #include <QtWidgets/QWidget> #include "pages/Login.hpp" class GlobalContainer : public QWidget { Q_OBJECT public: GlobalContainer(int width = 800, int height = 600, QWidget *parent = nullptr); ~GlobalContainer(); protected: private: QWidget layoutWidget; QPushButton button; }; #endif
GlobalContainer.cpp
#include "GlobalContainer.hpp" #include <QtCore/QtCore> GlobalContainer::GlobalContainer(int width, int height, QWidget *parent): QWidget(parent) , layoutWidget(this) , button(&layoutWidget) { setWindowTitle(QCoreApplication::translate("GlobalContainer", "MyApp", nullptr)); setObjectName(QString::fromUtf8("MainWidget")); resize(width, height); // This was my first test where i apply style to each of my compnents individualy // This did not worked either // setStyleSheet( // "GlobalContainer {\ // background-color: #000000;\ // }\ // GlobalContainer:hover {\ // background-color: #ffffff;\ // }" // ); } GlobalContainer::~GlobalContainer() { } void GlobalContainer::init(void) { layoutWidget.setObjectName(QString::fromUtf8("layoutWidget")); layoutWidget.setGeometry(QRect(100, 190, 327, 236)); layoutWidget.setStyleSheet( "#layoutWidget {\ background-color: #ff0000;\ }\ #layoutWidget:hover {\ background-color: #0000ff;\ }" ); button.setText("Test"); }
From this i'v conclude that inheritance was the source of my issue
i've decided to have a test by replacingQWidget layoutWidget
withMyQWidget layoutWidget
MyQWidget being nothing more than class inherited from QWidgetthis result in a layoutWidget having no Sytle sheet at all (just as GlobalContainer did) which confirmed my hipothesis
So on i've decided to replace GlobalContainer by a QWidget Directly). This has been done through this :
#include <iostream> #include <QtCore/QtCore> #include <QtGui/QtGui> #include <QtWidgets/QApplication> #include <QtWidgets/QPushButton> #include <QtWidgets/QGroupBox> #include "GlobalContainer.hpp" #include "pages/Login.hpp" int main(int argc, char *argv[]) { int width = 800; int height = 600; /* gets size passed as parameter or set it to screen size */ QApplication app(argc, argv); // app.setStyleSheet( // "#MainWidget {\ // background-color: #000000;\ // }\ // #MainWidget:hover {\ // background-color: #222222;\ // }" // ); QWidget test(nullptr); test.setObjectName(QString::fromUtf8("MainWidget")); test.resize(width, height); // As you can see right above i've tested bot QApplication.setStyleSheet() and QWidget.setStyleSheet() test.setStyleSheet( "#MainWidget {\ background-color: #000000;\ }\ #MainWidget:hover {\ background-color: #222222;\ }" ); QWidget layoutWidget(&test); layoutWidget.setObjectName(QString::fromUtf8("layoutWidget")); layoutWidget.setGeometry(QRect(100, 190, 327, 236)); layoutWidget.setStyleSheet( "#layoutWidget {\ background-color: #ff0000;\ }\ #layoutWidget:hover {\ background-color: #0000ff;\ }" ); test.show(); return (app.exec()); }
Unfortunately this did not made the expected output. i still get a test which has no StyleSheet applied and a layoutWidget which has Style Sheet applied
I'm certainly missing something, any help on this would be appreciate.