MaterialUI вместе со стилями-компонентами, SSR

Я создаю новый проект с SSR, используя Next.js, MaterialUI и styled-components. Насколько мне известно, MaterialUI использует JSS в качестве инструмента для SSR (согласно example в своем репозитории). Интересно, знает ли кто-нибудь, как я могу заставить его работать со стилизованными компонентами. Я открыл проблемы в репозиториях MaterialUI и styled-components, оба автора ответили мне, что не знают, как заставить его работать вместе. Но, наверное, кто-нибудь это уже сделал? Или хотя бы подскажите, куда копать, чтобы решить эту проблему. Заранее спасибо!


material-ui next.js styled-components server-side-rendering
person th1rt3nth    schedule 18.09.2017    source источник
comment
Эй, ты решил это?   -  person Ajit T Stephen    schedule 17.09.2018

Ответы (4)


arrow_upward
1
arrow_downward

Вы можете использовать стилизованные компоненты с пользовательским интерфейсом материала, но в конечном итоге вам придется использовать !important много. Нравится:

import Button from "material-ui/Button"

const MyButton = styled(Button)`
  background: red !important;
`

В проекте, над которым я работаю с той же комбинацией, я только что прибег к использованию материала в стиле JSS - пользовательский интерфейс хочет, чтобы вы использовали весь withStyles HOC ..

person idlefingers    schedule 20.09.2017
comment
Да, немного жаль, что вы в основном вынуждены использовать JSS, если хотите более плавной работы с material-ui. - person idlefingers; 20.09.2017

arrow_upward
1
arrow_downward

Вы можете проверить их документы здесь https://material-ui.com/guides/interoperability/#styled-components, вы можете проверить раздел более глубоких элементов, если хотите переопределить определенные классы https://material-ui.com/guides/interoperability/#deeper-elements

ниже мой пример, где для компонента переключателя

const StyledSwitch = styled(({ ...other }) => (
  <div>
    <Switch
      {...other}
      classes={{ colorSecondary: 'colorSecondary', checked: 'checked', bar: 'bar' }}
    />
  </div>
))`
  & .colorSecondary.checked + .bar {
    background-color: ${props => props.theme.lighter.toString()};
  }
  & .colorSecondary.checked {
    color: ${props => props.theme.default.toString()};
  }
`;

export default StyledSwitch;

использование

<StyledSwitch theme={lightTheme.secondary} />

здесь используется тема, но вы можете указать любой цвет, который хотите

person p-ether    schedule 27.09.2018

arrow_upward
0
arrow_downward

Похоже, у нас есть 3 способа (может быть проще, но не все - цветы) переопределить стили пользовательского интерфейса материала с помощью стилизованных компонентов. Вот мой Gist.

person GarouDan    schedule 10.01.2018

arrow_upward
0
arrow_downward

Я так делаю:

В головном компоненте приложения:

const styleNode = document.createComment('insertion-point-jss')
document.head.insertBefore(styleNode, document.head.firstChild)

const generateClassName = createGenerateClassName()
const jss = create({
  ...jssPreset(),
  insertionPoint: 'insertion-point-jss'
})
<JssProvider jss={jss} generateClassName={generateClassName}>


        <Main />
    </JssProvider>

а затем просто стиль:

import styled from 'styled-components'
import Select from '@material-ui/core/Select'
import Input from '@material-ui/core/Input'
import React from 'react'
export const InputM = styled(({ ...other }) => (
  <Input {...other} classes={{ input: 'input' }} />
))`
  color: ${p => p.theme.textColor};
  & .icon {
    font-family: ${p => p.theme.fontFamily};
    font-size: ${p => p.theme.fontSize}px;
    color: ${p => p.theme.textColor};
  }
`
person ZiiMakc    schedule 20.12.2018