Themed Text control doesn't work in QML Application

Question

I have a simple application with the following QML

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    Column {
        Text {
            text: "Hello World"
            color: "red"
            font.pixelSize: 24
        }

        Rectangle {
            width: parent.width
            height: 1
            color: "black"
        }
    }
}

I want to package up the text and the rectangle into a control for reuse. So I created a QML document called Label.qml with the following content

Item {
    property alias text: text.text
    Column {
        Text {
            id: text
            color: "red"
            font.pixelSize: 24
        }

        Rectangle {
            width: parent.width
            height: 1
            color: "black"
        }
    }
}

And refactor the application as follows,

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    Label {
        text: "Hello World"
    }
}

However this doesn't work, the text in the refactored version is unstyled, and the rectangle does not appear. What am I missing?

Answer 1

Problem reason The type name of your custom component Label is clashing with the Label control that is available because of import QtQuick.Controls statement in your file.

Solution Change the name of your custom qml type to some another name. Ex: MyLabel

That's it.