How to create grouped/nested properties?

Question

I am trying to do nested properties like 'font.family' or 'anchors.fill', but I cannot initialize them in normal way because it prints 'Cannot assign to non-existent property'. Instead I am forced to use Component.onCompleted method. What's wrong?

MyButtonStyling.qml:

import QtQml 2.1

QtObject
{
    property QtObject background: QtObject
    {
        property color pressed: "#CCCCCC"
        property color enabled: "#666666"
        property color disabled: "#555555"
    }
}

main.qml:

import QtQuick 2.0

Item
{
    width: 400
    height: 300
    MyButton
    {
        text: "TEST"
        styling: MyButtonStyling
        {
            //background.enabled: "#1B2E0A" //Cannot assign to non-existent property "enabled"
            Component.onCompleted:
            {
                background.enabled = "#1B2E0A" //Works
            }
        }
    }
}

MyButton.qml:

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0

Button
{
    property QtObject styling: MyButtonStyling {}

    implicitWidth: 80
    implicitHeight: 80

    style: ButtonStyle
    {
        background: Item
        {
            Rectangle
            {
                anchors.fill: parent
                color: control.pressed ? styling.background.pressed : control.enabled ? styling.background.enabled : styling.background.disabled
            }
        }
    }
}

Answer 1

Try replacing your nested QtObject with a QML file. For example, I replaced it with BackgroundTheme.qml. This way, the property (which can correcly be called "grouped property") works correctly, in a binding and without any error.

BackgroundTheme.qml

import QtQuick 2.0

QtObject {
  property color pressed: "#CCCCCC"
  property color enabled: "#666666"
  property color disabled: "#555555"
}

MyButtonStyling.qml

import QtQuick 2.0

QtObject {       
    property BackgroundTheme background: BackgroundTheme {}
}