Cannot assign to non-existent property - qt

Question

I am trying to make a very simple program to learn how to define custom QML types for reuse. I'm not sure why I'm getting the following error:
Cannot assign to non-existent property "color"
I have searched for an answer and have not found anything that solves it.
Below is the code. Qt underlines color and radius in red, meaning that it is being flagged as an "invalid property name."
//Button.qml
import QtQuick 2.3
Rectangle {
width: 100; height: 100
color: "red"
MouseArea {
anchors.fill: parent
onClicked: console.log("button clicked!")
}
}
//main.qml
import QtQuick 2.3
import QtQuick.Controls 1.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered");
}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}
Column {
Button {width: 50; height: 50}
Button { x: 50; width: 100; height: 50; color: "blue" }
Button { width: 50; height: 50; radius: 8}
}
}

Answer 1

Qt Quick Controls has a Button type, and so do you. Apparently the Button from the Qt Quick Controls import (which has no radius or color property) gets chosen over your local file. You have a few options:
Rename your Button type to something else.
Import Qt Quick Controls into a namespace.
Import your type into a namespace.
Here's how you'd do option #2:
import QtQuick 2.3
import QtQuick.Controls 1.2 as Controls
Controls.ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
menuBar: Controls.MenuBar {
Controls.Menu {
title: qsTr("File")
Controls.MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered")
}
Controls.MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit()
}
}
}
Column {
Button {
width: 50
height: 50
}
Button {
x: 50
width: 100
height: 50
color: "blue"
}
Button {
width: 50
height: 50
radius: 8
}
}
}