Open ivmarkov opened 6 years ago
The problem is amplified when the Textfield
element has a helptext, because then, besides the Field
inner component, there is a div element wrapping the Field
and the Helptext
components which also needs styling.
The more I think about it, the more the issue seems to be related to styling only. In other words:
Textfield
, that would always be the input
element, as it is now. For other components like Dialog
, we have to think. Note though that other frameworks like Material-UI (see below), besides assigning the props to the most important inner element, also define optional inputProps, helpProps, etc., but I think that's completely orthogonal to the styling issue, and may or may not be implemented laterTextfield
control can be styledPerhaps it might help if we learn how other toolkits are doing it. Here's the rule in Material-UI:
style
property on the root element, and then, for each inner element, they expose a xxxStyle propertyOK. So in the upcoming v1, Material UI seems to have given up completely on "Rule 1" from above. "xxxStyles" are nowhere to be seen. "Rule 2" seems to be 100% enforced though. The only thing they allow, in their Textfield
Props is:
Textfield
component three. They obviously do have a "style" property, but it seems to be always assigned to the root component, and they don't deal with it in any explicit way.Input
, Helptext
, etc.) which are appended to their own internal styling classNames (they seem to now do styling completely with JSS embedded rules)Would that work for us? E.g. follow a simple pattern where the user can supply a className string prop which is always assigned to the root element of the component, as well as one or more "xxxClassName" properties that - if supplied - will be assigned to the major sub-elements in the component's element tree? This seems like a simple change, which has the added benefit that it can be used with a CSS-in-JS or with regular CSS rules.
Any feedback? Ability to style components is crucial if the library is to gain traction in the community...
Thank you for analyze, sure it make sense. I'll extend components by xxxClassName props.
See #57. For
<Textfield>
there is a similar (but not identical) issue. "...otherProps" are put on the<input>
element, and not on the<div>
(Field) element. While I see the rationale for this (very often you would like to push properties to the input element, as this is the one which interacts with the user), this precludes us from styling the Textfield element as a whole. For example, how am I supposed to make it occupy 100% width? Perhaps, I'm missing the elephant here...