Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. StyleSheet not applying when a child is declared

StyleSheet not applying when a child is declared

Scheduled Pinned Locked Moved Unsolved General and Desktop
stylesheetqwidgetinheritance
1 Posts 1 Posters 442 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    Dzious
    wrote on last edited by
    #1

    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 CMake

    So 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 uncomment

    QPushButton 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 replacing QWidget layoutWidget with MyQWidget layoutWidget
    MyQWidget being nothing more than class inherited from QWidget

    this 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.

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved