Style Parent Element

[peetzweg]

I can't find a way to properly style the parent element the text is rendered into. Can't provide a class or style property.

[jamuhl]

You mean for the Interpolate Component?!? What you want to render? Could you paste some code snipplet?!?

[peetzweg]

I'am using a Component from the Material-UI framework, which receives a plain text as a secondaryText prop. Just dropping a Text with the Interpolate component with the default span parent breaks it's styling, the p element at least displays it in a block as it should be.

Using the HOC method to translate the text worked like charm before, however I switched to the Interpolate method because I had issues calculating the size of the Element the text is rendered into.

<ListItem
    secondaryText={
        <Interpolate 
            parent={'p'} 
            i18nKey={notification.message.content}
        />
    }
>

[jamuhl]

I'm rather sure we allow className on that: https://github.com/i18next/react-i18next/blob/master/src/interpolate.js#L47

think we should do the same for style prop?!? If you like you might add a PR for that to speed new version up...else i will add this asap (but not earlier ;))

[peetzweg]

Ah okay, with this i could create a workaround. However a style prop would be cleaner, at best the parent should be an actual component instead of a plain string.

[jamuhl]

You can pass your own component as parent - but obviously useless right now as no props get passed to it beside the className. For that we would need to remove all props that where used in for the interpolation and pass the rest of the props down to the parent component.

Should be possible...but like said...hard on time so don't expect this to land very soon. PR would be very welcome.

[jamuhl]

style prop will be passed to the interpolate container in next version