How do I apply the style to a TextField in QML? It seems “style” attribute isn't available

Question

I am trying to apply some styles to a new qt 5.7 application I am working on and the following is not working at all. It gives the error: qrc:/SignInView.qml:67 Cannot assign to non-existent property "style" And I can't edit it in design mode for the same reasons.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.4

Page {
    id: page1
    ColumnLayout {
        id: columnLayout1
        height: 100
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.top: parent.top

        Label {
            text: qsTr("Label")
            font.pointSize: 16
            horizontalAlignment: Text.AlignHCenter
            Layout.fillWidth: true
        }

        Image {
            id: image1
            width: 200
            height: 200
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
            fillMode: Image.PreserveAspectCrop
            anchors.horizontalCenter: parent
            source: "qrc:/qtquickplugin/images/template_image.png"

            Button {
                id: button1
                text: qsTr("Button")
                anchors.bottomMargin: 10
                anchors.rightMargin: 10
                anchors.bottom: parent.bottom
                anchors.right: parent.right
            }
        }

        Rectangle {
            id: field1
            width: 200
            height: 40
            color: "#ffffff"
            Layout.fillWidth: true



            Label {
                id: label1
                text: qsTr("Full Name")
                anchors.topMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 5
                anchors.top: parent.top
            }
            TextField {
                style: TextFieldStyle {
                    textColor: "black"
                    background: Rectangle {
                        radius: 2
                        implicitWidth: 100
                        implicitHeight: 24
                        border.color: "#333"
                        border.width: 1
                    }
                }
            }
        }
    }
}

I have being trying to follow this example:

http://doc.qt.io/qt-5/qml-qtquick-controls-styles-textfieldstyle.html

It fails at the style attribute in the Qt Creator giving the error that style doesn't exist. I assume it's something with my libraries not loading or maybe the environment I have setup. I don't have style in buttons or anywhere else either. I assumed if I had the imports it would work but it's not.

A related issue on SO is here: QML - How to change TextField font size But here it seems to just work.

Answer 1

In Qt Quick Controls 2, there is no such property as TextField::style. In general, there is no way to use the style objects from Qt Quick Controls 1 with Qt Quick Controls 2. The APIs between the two major versions of Qt Quick Controls are not compatible. See the following documentation pages for more details:

• Differences between Qt Quick Controls
• Styling Qt Quick Controls 2
• Customizing Qt Quick Controls 2

A new API-incompatible major version was introduced, because there is basically no way to make the heavily Loader-based architecture of Qt Quick Controls 1 perform reasonably well. Therefore all that dynamic loading of Components was ditched in Qt Quick Controls 2. The delegates that used to be dynamically instantiated from Components provided by a dynamically loaded style object are now part of the control instead, instantiated "in place". In essence:

TextField {
    style: TextFieldStyle {
        textColor: "white"
        background: Rectangle { color: "black" }
    }
}

vs.

TextField {
    color: "white"
    background: Rectangle { color: "black" }
}

You can read more about the history here. In particular, this post highlights the fundamental structural changes in Qt Quick Controls 2.