Overriding core components styles

[asaf]

Hey,

I'd like to perform minimal changes on the core widgets shipped with this package,
For example, I'd like to extend all components with my some CSS classes:

import React, {PropTypes} from "react"
import _BaseInput from 'react-jsonschema-form/lib/components/widgets/BaseInput'

function BaseInput(props) {
    return <_BaseInput {...props} className='foo'/>
}
export default BaseInput

This won't work because BaseInput overrides the className field,

Do you find it okay to move the inputProps at the end of the list so default props could be overriden ?

Also, other components that don't inherit from BaseInput don't propagate properties, if you find this approach acceptable I can send some PR that make the core widgets extendable.

Thanks.

[n1k0]

Yeah that sounds reasonnable. Please send a PR 👍

[developer-lindner]

@n1k0 What about removing the bootstrap dependency and implement something like decorators? so anyone could define the wrapping div's + classes they need for their chosen framework. Or implement a decorator plugin for the specific framework (bootstrap, foundation, whatsoever). Just my 2 cents...

[mravenash]

is there a sandbox for this? It will be helpful.

[epicfaace]

@mravenash yes, see https://react-jsonschema-form.readthedocs.io/en/latest/#tips-and-tricks