Question

最近2个小时我一直在挠头，这就是为什么第三方样式的组件未添加i的原因。

import React from 'react';
import styled from 'styled-components'
const StyleDiv =styled.div`
@media(max-width:600px){
body{
background-color: red;
}
}`
const Person= (props)=>{
return <StyleDiv>
<h1 onClick={props.click}>i am {props.name} and {props.age} years old as you  know me as {props.children} </h1>
<input type="text" onChange={props.changed} />
</StyleDiv>
} 
export default Person;

Answer 1

如果将选择器放在模板字符串中而不使用与号，则它们将引用组件的子代。 https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

基本上，您不能在div中选择正文，您可能不应该这样做。

Answer 2

您不能将这样的全局样式应用于组件，因为要应用全局样式（即，将样式应用于正文，html等），styled-components给出了createGlobalStyles实用程序，可以这样使用：< / p>

import { createGlobalStyles } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  @media (max-width: 600px) {
    body {
      background-color: red;
    }
  }
`;

// Render GlobalStyles to the root lvvel of your app
ReactDOM.render(
  <>
    <GlobalStyles />
    <App /> 
  </>,
  document.getElementById('root');
);

希望它会有所帮助：）

为什么不添加样式化的组件样式

2 个答案: