Question

我使用Next.js，MaterialUI和样式组件使用SSR构建新项目。据我所知，MaterialUI使用JSS作为SSR的工具（根据其存储库中的example）。我想知道是否有人知道如何使用样式组件。我在MaterialUI和样式组件存储库中打开了问题，两位作者都回答我说他们不知道如何让它一起工作。但可能有人已经这样做了吗？或者至少可以告诉我在哪里挖掘来解决这个问题。提前谢谢！

Answer 1

您可以使用带有材质ui的样式化组件，但最终需要大量使用!important。像这样：

import Button from "material-ui/Button"

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

在我正在使用相同组合的项目中，我只是使用了JSS样式材料 - ui希望你使用整个withStyles HOC ..

Answer 2

您可以在https://material-ui.com/guides/interoperability/#styled-components处检查其文档，如果要覆盖特定的类https://material-ui.com/guides/interoperability/#deeper-elements

，可以检查更深的元素部分。

下面是我的示例，其中用于开关组件

"title=variable - SPEED"

用法

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;

这正在使用主题，但是您可以指定所需的任何颜色

Answer 3

看起来我们有3种方式（可能更容易，但不是一切都是鲜花）来覆盖使用样式组件的材质UI样式。这是我的Gist。

Answer 4

我这样做是这样的：

在应用程序的头部：

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};
  }
`

MaterialUI与样式组件SSR一起使用

4 个答案: