Adding className to List component.

[Aristona]

Description

Requesting className property for List component. I have to add a class name to the List component because I have predefined values in my Sass files like so:

.company-selector {
   width: $grid-2;
   max-height: ($list-height * $company-selector-dropdown-list-amount);
}

because this List should adapt to template changes. Also, I'm not a fan of inline styling in components.

Images & references

N/A

Problem description

It is not possible to add className on a List element without typescript errors.

 Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<List> & Readonly<{ children?: ReactNode; }> & Read...'.

Link to minimally-working code that reproduces the issue

<List className="something" />

Versions

N/A

[m2mathew]

@Aristona I understand not being a fan of the inline styles, but it would be helpful to have a "Link to minimally-working code" like a codepen or similar. You can use typescript on a codepen, etc.

The styles will work a little differently in the next branch that is heavily under development right now. Not such a reliance on inline. :)

Also, you put "N/A" under versions. Can you let us know which versions you have?

[Aristona]

@m2mathew I thought I didn't have to specify versions because it is a feature request. Right now my terminal looks like this:

and this is how it shows error on my text editor:

Versions are:

"material-ui": "^0.17.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "4.4.5",
"typescript": "^2.2"

Using Chrome latest version.

I'm not sure if I should add a Codepen because it occurs whenever you add className to a List component.

In my opinion, there should be standard attributes such as style and className on each UI component. What do you think?

[toddmedema]

I agree. I'm getting a similar error with FlatButton, even though the docs there say that className is a valid attribute

[m2mathew]

Hey @Aristona, I don't have any experience with Typescript. I started to use it and research this, but that is like learning another JavaScript! 😱

[mbrookes]

@toddmedema What typescript definitions are you using? This doesn't sound like a Material-UI problem.

@Aristona className (and any other undefined props) will be spread to the root element, but there's no guarentee that you will be able to override all styles. As @m2mathew mentioned, you might prefer working with the next branch.

[toddmedema]

Getting this error:

ERROR in [at-loader] ./app/components/ContextEditor.tsx:64:26 
    TS2339: Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<FlatButton> & Readonly<{ children?: ReactNode; }> ...'.

With "@types/material-ui": "^0.17.1",, "material-ui": "~0.17.1",, "typescript": "^2.2.1",

On

<FlatButton className="qqq">
  <LeftIcon/>
</FlatButton>

[mbrookes]

@toddmedema You need to post your issue here then. (Looks like they have a huge backlog of issues and PRs though.)