Question

我试图完全遵循此处记录的内容：

How to theme components with styled-components and Material-UI?

go get -v github.com/containous/yaegi@0.8.11

但是我没有使用像上面那样的“标准” HTML组件，而是尝试了一个没有运气的Material-UI按钮。有人可以帮我解决我做错的事情吗？

这是我正在尝试的：

styles.ts

import React from "react";
import { withTheme } from "@material-ui/core/styles";
import styled from "styled-components";

const StyledDiv = withTheme(styled.div`
  background: ${props => props.theme.palette.primary.main};
  color: ${props => props.theme.palette.primary.contrastText};
`);
export default function App() {
  return (
    <StyledDiv>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </StyledDiv>
  );
}

index.tsx

import styled from 'styled-components';
import { withTheme } from "@material-ui/core/styles";
import { Button } from '@material-ui/core';

export const StyledInnerSignInButton = withTheme(styled(Button)`
    margin: ${props => props.theme.spacing(3, 0, 2)};
`)

我被困在这里，仍然是React新手。任何帮助将不胜感激！

Answer 1

我设法解决了问题。这是由于specificity。有两种方法可以减轻这种情况，一种是通过用&&包装新的组件样式，例如：

export const StyledInnerSignInButton = withTheme(styled(Button)`
    && { margin: ${props => props.theme.spacing(3, 0, 2)}; }
`)

或通过操纵here

中所述的CSS注入顺序

在“主” index.tsx文件中，您将通过以下方式设置代码：

import React from 'react';
import { render } from 'react-dom';
import { StylesProvider } from '@material-ui/core/styles';
import Home from './pages/Home';

render(
  <React.StrictMode>
    <StylesProvider injectFirst>
      {/* component name */}
      <Home />
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

希望对与我有相同问题的人有所帮助。

如何使用样式化组件和Material-UI为组件设置主题

1 个答案: