[Tabs]:server-side-rendering problems with metarial-ui Tabs's indicator

[WEN-JY]

I met a problem about the indicator of Tabs component ,
the detail is when ssr was finished,the span of indicator was inside of first tab whose class was 'MuiTab-root ',but after a while ,it turned to be inside the tab scroll container whose class was 'MuiTabs-scroller',about 400ms.

about 400ms later,it turned into this:

and during the period,I just did nothing
this can be repeated successfully 100% just disable the javascript and use ssr frameworks

Tech	Version
Material-UI	v3.3.1
React	16.5.1
Browser	chrome
TypeScript	no
etc.	koa+nextjs

[oliviertassinari]

@WEN-JY This behavior is expected. It's what allows us to render the indicator server side without access to the layout computation APIs (= JavaScript disabled). How is that an issue?

[WEN-JY]

@oliviertassinari well~when I give indicator a custom width，such as 20px，it will be centered inside the default Tab when it first rendered from server-side,but it moves from center to left-side of Tabs after js run。this causes the problem that client-side rendered different from server-side，and Tabs component is been rendered twice。

[WEN-JY]

what I mean is maybe the indicator should not be inside any tab ,just like in client side,so it keeps
consistent and saves an useless client-side rerendering

[oliviertassinari]

See #7187 regarding the motivation of the current design. You gonna have to override both or disable the indicator to use a custom one.

[WEN-JY]

See #7187 regarding the motivation of the current design. You gonna have to override both or disable the indicator to use a custom one.

thx very much,finnaly I solved this by using action props as you metioned in

#7187

what I do is just set the correct left value when the action callback fired ,it performs just like what i want

[Tokenyet]

It might be a silly question, Doesn't animation of tabs work on ssr? I'm using Next with material-ui, but found out that the indicator won't be animated when tab selected. I used the code in Customized tabs section with Nextjs.