相邻组件css文件在反应中相互冲突

Question

我正在使用react创建一个网站，并且在我的一个子组件中，我正在导入一个css文件来制作可爱的动画。问题是，这导致了我所有页面之间的冲突（这是一个单页面应用程序）。我所有的样式都已移动，即使没有导入样式表的页面也是如此。它的代码很多，所以我将其部署在heroku上，以便大家看看：https://farm-management-pro.herokuapp.com

您可以使用密码为“ e”的“ e@e.com”登录，或使用任何有效的电子邮件字符串创建一个帐户。

Answer 1

使用styled-components软件包。这样可以避免冲突。

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

const StyledButton = styled.button`
    background: blue;
    color: #FFFFFF;
    text-transform: uppercase
`

const MyAwesomeComponent = props => (
    <StyledButton>This is my awesome button<StyledButton>
)

export default MyAwesomeComponent

这使您可以在每个组件中隔离样式，从而防止冲突。

了解更多here