样式组件多重覆盖 css 没有效果？

Question

我有一个使用 styled-components 设置样式的 React 组件，但它可以再次应用样式吗？我的按钮是一个反应组件

import Button from "./Button";

然后我在其他地方添加了 margin-top，它不应用样式。

//margin-top has no effect?
const ButtonStyled = styled(Button)`
  margin-top: 100px;
`;

export default function App() {
  return <ButtonStyled>My button</ButtonStyled>;
}

演示在这里 https://codesandbox.io/s/goofy-montalcini-l47kp?file=/src/App.js:144-150

Answer 1

我看到了两个替代 css 的选项。

包装组件
通过道具

import styled, { css } from "styled-components";

const ButtonStyled = styled.button`
  ${(props) => {
    return css`
      margin-top: 10px;
      width: 200px;
      padding: 16px 0;
      border: 1px solid;
      color: black;
      font-size: 16px;
      font-weight: 900;
      border-radius: 5px;
      ${props.newStyled}
    `;
  }}
`;

const Button = ({ children, ...props }) => {
  return <ButtonStyled {...props}>{children}</ButtonStyled>;
};

// OPTION 1: WRAPPER THE COMPONENT
function Question7_option1() {
  const DivStyled = styled.div`
    button {
      margin-top: 100px;
    }
`;
  return (<DivStyled>
    <Button>Button</Button>
  </DivStyled>);
}

// OPTION 2: NEW STYLES THROUGH PROPS
function Question7_option2() {
  const newStyled = css`
    margin-top: 100px;
`;
  return (<Button newStyled={newStyled}>Button</Button>);
}

export default Question7_option2;

希望对你有所帮助

Answer 2

为了使 styled 函数起作用，组件必须接受 className 属性。现在，当您定义 Button:

const Button = ({ children }, props) => {
  return <ButtonStyled {...props}>{children}</ButtonStyled>;
};

你试着把道具散布到ButtonStyled，这很好，你只是把props的地方打错了。试试这个：

const Button = ({ children, ...props }) => {
  return <ButtonStyled {...props}>{children}</ButtonStyled>;
};

这样，className 道具（由 styled() 应用）将传递到 StyledButton。

样式组件多重覆盖 css 没有效果？

styled component multiple override css no effect?

html

javascript

css

reactjs

styled-components