SkinnableComponent does not react to state changes

Question

(Flex 4.5) I'm finding that SkinnableTextBase will change its styles according to the CSS file when it changes state, but SkinnableComponent won't. Why?
Here's what I do. I create a class which extends SkinnableTextBase like this:
public function MySTB() {
    super();
    states = new Array();
    for each (var name:String in ["inactive", "active"]) {
        var state:State = new State();
        state.name = name;
        states.push(state);
I create another class which is the same, but which extends SkinnableComponent.
In the CSS I tell them to have a green background when they are in the "active" state:
customLabel|MySTB:active, customLabel|MySCom:active {
    content-background-color: #ccffcc;
And I give both of them basically the same skin.
When I call setCurrentState("active") on each of them, the SkinnableTextBase changes its background colour, but the SkinnableComponent doesn't. Why not? I would like to base a component on SkinnableComponent and need it to respond to state changes.

Answer 1

Thanks Karl for the response. In this case the issue is not skin states but component states. It's rather confusing but there are two types of state and in fact the CSS states syntax as given above pertains to the component state. The skin has nothing to do with it.
There must be something in SkinnableTextBase which is not in SkinnableComponent which causes the css syntax to be applied; though in theory this should work in any component. (see last example here: http://cookbooks.adobe.com/post_How_to_use_the_new_CSS_syntax_in_Flex_4-15726.html).