More advanced component customization

[voronianski]

I need to customize look and behavior of component in a more advanced way than props allow this. For example, I need to make component's height smaller and to adjust floating labels on focus to css translate3d in a proper pixel position, etc.

What do you recommend? I know this may sound no-reactish but I've already tried to extend component like class MyTextField extends TextField and reimplement getStyles method, however this doesn't work as expected..

[oliviertassinari]

adjust
proper

Is this because we are not following the material spec closely enough?

Well, if we were exposing a className API you would use it.
Here, we are using inline style but I think that we should follow the same principle.
Why not adding specific style property to modify the style of child elements?

[voronianski]

@oliviertassinari almost all props are fine except that you don't have floatingLabelFocusStyle and I cannot override this css transformation a bit:

if (this.state.isFocused) {
    styles.floatingLabel.color = focusColor;
    styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0px, -28px, 0)';
    styles.focusUnderline.transform = 'scaleX(1)';
}

if (this.state.hasValue) {
    styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? disabledTextColor : floatingLabelColor, 0.5);
    styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0px, -28px, 0)';
    styles.hint.opacity = 0;
}

The reason why we're making changes is only design of our app, which follows material-ui but have some differences. So it will be faster for us to use your awesome components and customize them a bit instead of recreating them by ourselves.

[oliviertassinari]

I see, we are open for PR to improve the customizability of our components 👍.

I need to make component's height smaller

I feel like the style you want to change is directly link to the height of the TextField.

What do you think about the dense spec of the material design?https://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field

[flyon]

same problem here. Trying to make the TextField higher. I've got everything working, except for the label position when the TextField has focus. I already redefined 'top:40' in the style of the floatingHoverLabel, which puts it in the right position when there is no focus, but I need the transform to end higher.

A floatingLabelFocusStyle prop would be perfect

[flyon]

I managed to get the desired behaviour now by wrapping TextField in my own ExtendedTextField class, using onBlur and onFocus to keep track of focus state and then changing the floatingLabelStyle like so:

    if(this.state.focussed)
    {
        labelStyle.transform = 'perspective(1px) scale(0.75) translate3d(2px, -39px, 0)';
    }

I tried to add floatingLabelFocusStyle to the source directly, but wasnt able to build and test, sorry (internet connection too slow here atm to install dev-dependencies)

If anyone wants to continueI changed text-field.jsx like so:

propTypes: {
    floatingLabelFocusStyle: React.PropTypes.object,

...

let floatingLabelTextElement = floatingLabelText ? (
  <label
    style={this.prepareStyles(styles.floatingLabel, this.state.isFocused ? this.props.floatingLabelFocusStyle : this.props.floatingLabelStyle)}