标签: styled-components

在样式组件中处理悬停的最佳方法是什么.我有一个包裹元素,当盘旋时会显示一个按钮.

我可以在组件上实现一些状态并在悬停时切换属性但是想知道是否有更好的方法来使用styled-cmponents.

像下面这样的东西不起作用,但是理想的:

const Wrapper = styled.div`
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.25);
  &:not(:last-child) {
    margin-bottom: 2rem;
  }
  &:hover {
    .button {
      display: none;
    }
  }
`

我在 next.js 中使用 styled-components，所以我的样式需要在服务器端呈现，因此我如何将谷歌分析添加到我的网站？

我检查了next.js 谷歌分析示例，但正如我所说，由于使用了样式组件，我的 _document 文件有所不同。

// _document.js

import React from 'react'
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
      })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal() …

如何在样式组件中使用条件呈现,使用React中的样式组件将我的按钮类设置为活动状态？

在CSS中我会这样做:

<button className={this.state.active && 'active'} onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>

在样式组件中如果我尝试在类名中使用'&&'它不喜欢它.

import React from 'react'
import styled from 'styled-components'

const Tab = styled.button`
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;
`

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
      active: false
    }  
    this.handleButton = this.handleButton.bind(this)
}

  handleButton() {
    this.setState({ active: true })
  }

  render() {
     return(
       <div>
         <Tab onClick={this.handleButton}></Tab>
       </div>
     )
  }}

我想在我的应用程序中使用样式组件,我想知道如何组织它.

基本样式的组件被分配给特定组件以便可重用.

但是我希望在其他组件中多次使用样式组件(例如动画组件)呢？我应该创建一个文件来保存这些"全局"样式组件并将其导入到许多组件中吗？

这是好习惯吗？

我正在尝试构建我的第一个投资组合网站,并使用react-router-dom 4.2.2和styled-components 2.2.3陷入路由.

错误消息:您不应在路由器外使用Route或withRouter()

我也尝试使用Link而不是NavLink,但也有错误(你不应该使用路由器外的链接)

请有人帮帮我.

navigationBar.js

import React, { Component } from 'react';
import { NavigationContainer, NavItem } from './navigationBar.style';

class NavigationBar extends Component {
  render() {
    return (
      <NavigationContainer>
        <NavItem to="/">Home</NavItem>
        <NavItem to="/projects">Project</NavItem>
      </NavigationContainer>
    );
  }
}

export default NavigationBar;

navigationBar.style.js

import styled from 'styled-components';
import { Flex, Div } from 'theme/grid';
import { NavLink } from 'react-router-dom';

export const NavigationContainer = styled(Flex)`
  position: fixed;
  right: 20px;
  top: 0.5em;
  font-size: 1em;  
`;
export const NavItem …

import Image from 'next/image'

...

<Image src="/emotion.svg" alt="emtion" width={50} height={50} />

我想更改 中的 SVG 颜色next/image。

但在 CSS 中，

img {
  fill="#ffffff"
}

不管用。

我该如何解决这个问题？

有没有办法将样式组件与react-bootstrap一起使用？react-bootstrap公开bsClass属性而不是className它们的组件,这似乎与样式组件不兼容.

有经验吗？

如果您添加styled-components到 React Native 项目，则会有一个专门用于本机组件的子目录：

import styled from 'styled-components/native`;

export const Container = styled.View`
  ...
`;

如果您尝试在 React Native TypeScript 项目中执行此操作，您将遇到以下打字错误：

Could not find a declaration file for module 'styled-components/native'.

解决此问题的典型方法是@types/styled-components在开发依赖项中安装该模块，但这并不能解决问题。

通常,在使用纯CSS时,我有一个包含以下内容的样式表:

html {
    height: 100%;
}

body {
    font-size: 14px;
}

styled-components在我的React项目中使用时,如何为htmlor或bodytags 设置样式？我是否仅为此目的维护一个单独的CSS文件？

在GraphQL中,您可以编写类似这样的内容来定义查询:

const USER_QUERY = gql`
  {
    user(id: 2) {
      name
    }
  }
`

在样式化组件中,您可以像这样定义样式化组件:

const Button = styled.button`
    background-color: papayawhip;
`

这是什么语法？我知道使用模板文字你可以使用这种语法来修改变量:${foo}但是我从未见过使用它.任何指导将不胜感激.