How to deal with the hover and press state of custom button?

[Kamichanw]

I'm writing a custom button, the code is shown below

Rectangle {
    id: control
    color: "white"
    states: [
        State {
            name: "hover"
            when: ma.containsMouse
            PropertyChanges {
                control.color: "blue"
            }
         },
         State {
             name: "press"
             when: ma.containsPress
             PropertyChanges {
                 control.color: "red"
             }
         }]
    transitions: [
        Transition {
            // from: <default state>
            to: "hover
            ColorAnimation{ /* some special settings */ }
        },
        Transition {
            from: "hover"
            to: "press"
            ColorAnimation{ /*other special settings */ } 
        }, // other Transitions
        ]
    MouseArea {
        id: ma
        hoverEnabled: true
    }
}

As you can see here, I want to customize the state trainsition among default, hover and press. However, I have no clue to deal with these states. You might advise me to create a new state called default. However, the color of control might be changed by user, that is, I cannot do like

State {
    name: "default"
    PropertyChanges {
         control.color: constrol.color // ????
    }
}

Anyone can help?

[Bob64]

@Kamichanw Can you add a property to your component that defines the default colour?