Overriding styles isn't working

[dnish]

Hey,
I'm trying to create a button component which changeable styles (border and without border). This is my React component:

class PlayerButton extends React.Component {

    constructor(props) {
        super(props);


    }


    render() {



        return (
            <TouchableOpacity style={this.props.style.buttons} styleName={this.props.styleName}>
                    <Icon styleName="icon big" name={this.props.icon} size={this.props.iconSize}/>
            </TouchableOpacity>
        );
    }

}


let style = {
    buttons: {}
};

let styled = connectStyle("musica.Player", style)(PlayerButton);


export {styled as default};

This is the part of my theme where I've defined the values:

    buttons: {


        '.no-border': {
            borderWidth:0
        },

        '.big': {
            width: 60,
            height: 60,
            borderRadius: 60,

        },


        '.mid': {
            width: 40,
            height: 40,
            borderRadius: 40
        },


        borderWidth:1,
        borderStyle:'solid',
        borderColor:'#585858',

        justifyContent:'center',
        alignItems:'center',
        marginHorizontal: 10
    }

In another component, I'm doing something like this:

The problem is, that the border is still there, so borderWidth:0 is ignored. I've also tried it with another properties like backgroundColor, there I have the same effect. The default value doesn't get overridden.

[zrumenjak]

Did you manage to solve this? If not, could you post a more complete example?

It is a bit weird that you are propagating style names from your button to the TouchableOpacity because the TouchableOpacity probably doesn't have those style names defined in its theme.

Several other things that could cause problems here:

• you didn't wrap the app in a StyleProvider
• you passed a wrong style to StyleProvider
• the buttons style above is not wrapped in musica.Player property in your theme
• you are passing a wrong style/styleName when you are using your component

[Definitely-Not-Vlad]

Closing due to inactivity.