React App 某些 CSS 属性被忽略

Question

我的应用程序中有一个奇怪的错误导致某些 CSS 属性消失。当我登录我的应用程序时，我使用 <Redirect to="/home"/> 转到我的主页。然后一些图像消失了，一些按钮的大小只有它们应该的一半。当我刷新浏览器时，页面恢复到它应该是的样子。我主要使用样式组件，下面是一些图片：

after signin, wrong version

after refresh page, correct version

这里是完整的代码https://github.com/aojiaooo/shopaholic-react-app

要运行代码，您必须更改下面的SignIn.js函数：

async function loginUser(credentials) {
  return "someRandomCookieOfYourChoice";
  //below was the original request to backend
  /**
  return await axios.post('http://localhost:8080/signin', credentials)
    .then(response => response.data.code === 0 ? response.data.data.value : null);
  */
}

一整天都很沮丧...任何帮助将不胜感激。我是后端人员，这是我尝试 React 的第一天。提前致谢！

import styled from "styled-components";
import { Link } from "react-router-dom";

//general layout for shopaholic
export const SectionWrapper = styled.section`
  box-shadow: 0 0 5px #ccc;
  padding: 15px 10px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
`

// style for header
export const HeaderWrapper = styled.header`
  min-height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  
  .menu, .close{
    cursor: pointer;
    display: none;
  }

  .hello {
    display: inline-block;
    padding: 10px 10px 15px 15px;
    height: 20px;
    margin-left: -50px;
  }
  
  @media (max-width: 1000px){
    ul{
      position: fixed;
      top:0;
      left: -100%;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      background: white;
      z-index: 99;
      opacity: 0.97;
      transition: 0.5s linear;
      margin-left: -20px;
    }
    .menu, .close{
      display: block;
    }
    .close{
      position: relative;
    }
    ul.toggle{
      left: 0;
    }
  }
`

export const HeaderLogoLink = styled(Link)`
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  display: block;
  padding-left: 30px;
`

export const HeaderNavWrapper = styled.nav`
  display: flex;
  padding-right: -100px;
  
  ul li a:hover{
    color: darkgray;
  }
  ul li a{
    text-decoration: none;
    text-transform: uppercase;
    color: #555;
    padding: 0 15px;
  }
  ul li{
    list-style: none;
    display: inline-block;
  }
`

// style for home page
export const ProductListWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-content: flex-start;
  flex-wrap: wrap;
  
`

export const CardWrapper = styled.div`
  min-width: 300px;
  min-height: 400px;
  border: 1px solid #eee;
  overflow: hidden;
  padding: 10px;
  box-shadow: 2px 8px 20px #ddd;
  margin: 10px 15px;
  transition: 0.5s linear;
  box-sizing: border-box;
  font-family: 'Georgia', sans-serif;
  display: block;
`

export const CardInfoWrapper = styled.div`
  margin: 10px 15px;
  text-decoration: none;
  a{
    text-decoration: none;
    color: #333;
  }
  a:hover{
    color: darkblue;
  }
`

export const CardImageWrapper = styled.img`
  max-width: 300px;
  max-height: 300px;
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: 10px 15px;
`

export const CardTextWrapper = styled.div`
  padding: 0;
  box-sizing: border-box;
  font-family: 'Georgia', sans-serif;
  line-height: 1.5;
  margin: -5px 0;
  -webkit-font-smoothing: antialiased;
`

export const CardTitleLinkWrapper = styled(Link)`
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: -5px;
  font-family:  'Segoe UI',serif;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
`

export const CardDetailLinkWrapper = styled(Link)`
  background:  #333;
  text-align: center;
  width: 300px;
  margin-left: 10px;
  height: 25px;
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 1em;
  color: white;
  text-decoration: none;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
`

// style for detail page
export const ProductDetailWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 50px 0;
  box-sizing: border-box;
`

export const DetailImageWrapper = styled.img`
  max-width: 500px;
  min-width: 290px;
  height: 300px;
  display: block;
  object-fit: cover;
  margin: 25px;
`

export const DetailInfoWrapper = styled.div`
  max-width: 500px;
  min-width: 290px;
  margin: 25px;
`

export const DetailTitleWrapper = styled.div`
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  font-weight: bold;
  box-sizing: border-box;
  font-family:  'Segoe UI',serif;
  letter-spacing: 1px;
`

export const DetailButtonWrapper = styled.button`
  background: #333;
  color: white;
  text-decoration: none;
  padding: 10px 35px;
  margin-top: 30px;
  display: inline-block;
  font-family: 'Georgia', sans-serif;
`

export const DetailTextWrapper = styled.div`
  box-sizing: border-box;
  font-family: 'Georgia', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  margin: 10px 0;
`

// style for alert box
export const AlertTextWrapper = styled.div`
  font-family: '.AppleSystemUIFont', sans-serif;
  -webkit-font-smoothing: antialiased;
`

Answer 1

我不确定，但你可以试试这个...

import styled from 'styled-components';
import { Link } from 'react-router-dom';

// general layout for shopaholic
export const SectionWrapper = styled.section`
  box-shadow: 0 0 5px #ccc;
  padding: 15px 10px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
`;

// style for header
export const HeaderWrapper = styled.header`
  min-height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;

  .menu,
  .close {
    cursor: pointer;
    display: none;
  }

  .hello {
    display: inline-block;
    padding: 10px 10px 15px 15px;
    height: 20px;
    margin-left: -50px;
  }

  @media (max-width: 1000px) {
    ul {
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      background: white;
      z-index: 99;
      opacity: 0.97;
      transition: 0.5s linear;
      margin-left: -20px;
    }
    .menu,
    .close {
      display: block;
    }
    .close {
      position: relative;
    }
    ul.toggle {
      left: 0;
    }
  }
`;

export const HeaderLogoLink = styled(Link)`
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  display: block;
  padding-left: 30px;
`;

export const HeaderNavWrapper = styled.nav`
  display: flex;
  padding-right: -100px;

  ul li a:hover {
    color: darkgray;
  }
  ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #555;
    padding: 0 15px;
  }
  ul li {
    list-style: none;
    display: inline-block;
  }
`;

// style for home page
export const ProductListWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-content: flex-start;
  flex-wrap: wrap;
`;

export const CardWrapper = styled.div`
  min-width: 300px;
  min-height: 400px;
  border: 1px solid #eee;
  overflow: hidden;
  padding: 10px;
  box-shadow: 2px 8px 20px #ddd;
  margin: 10px 15px;
  transition: 0.5s linear;
  box-sizing: border-box;
  font-family: 'Georgia', sans-serif;
  display: block;
`;

export const CardInfoWrapper = styled.div`
  margin: 10px 15px;
  text-decoration: none;
  a {
    text-decoration: none;
    color: #333;
  }
  a:hover {
    color: darkblue;
  }
`;

export const CardImageWrapper = styled.img`
  max-width: 300px;
  max-height: 300px;
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: 10px 15px;
`;

export const CardTextWrapper = styled.div`
  padding: 0;
  box-sizing: border-box;
  font-family: 'Georgia', sans-serif;
  line-height: 1.5;
  margin: -5px 0;
  -webkit-font-smoothing: antialiased;
`;

export const CardTitleLinkWrapper = styled(Link)`
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: -5px;
  font-family: 'Segoe UI', serif;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
`;

export const CardDetailLinkWrapper = styled(Link)`
  background: #333;
  text-align: center;
  width: 300px;
  margin-left: 10px;
  height: 25px;
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 1em;
  color: white;
  text-decoration: none;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
`;

// style for detail page
export const ProductDetailWrapper = styled.div`
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 50px 0;
  box-sizing: border-box;
`;

export const DetailImageWrapper = styled.img`
  max-width: 500px;
  min-width: 290px;
  height: 300px;
  display: block;
  object-fit: cover;
  margin: 25px;
`;

export const DetailInfoWrapper = styled.div`
  max-width: 500px;
  min-width: 290px;
  margin: 25px;
`;

export const DetailTitleWrapper = styled.div`
  display: block;
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  font-weight: bold;
  box-sizing: border-box;
  font-family: 'Segoe UI', serif;
  letter-spacing: 1px;
`;

export const DetailButtonWrapper = styled.button`
  background: #333;
  color: white;
  text-decoration: none;
  padding: 10px 35px;
  margin-top: 30px;
  display: inline-block;
  font-family: 'Georgia', sans-serif;
`;

export const DetailTextWrapper = styled.div`
  box-sizing: border-box;
  font-family: 'Georgia', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  margin: 10px 0;
`;

// style for alert box
export const AlertTextWrapper = styled.div`
  font-family: '.AppleSystemUIFont', sans-serif;
  -webkit-font-smoothing: antialiased;
`;

Answer 2

我不确定这是否适用于带样式的组件！！ !important 在样式上的使用被忽略，或者在反应中被覆盖。在正常情况下 css 我会这样做：

.selector{
    background-color: red !important;
}

你可以试试这个：

export const DetailButtonWrapper = styled.button`
  background: #333 !important ;
`;

我不确定这个答案，但你可以试试。 !important 未应用的样式

Answer 3

原来这个问题发生在运行应用程序使用 npm start

但是，css 问题在执行 npm run build 然后 serve -s build

时消失了

我想在生产方面这不是一个错误，而是开发环境出了问题，以防将来有人遇到这个问题，可以尝试构建项目并查看错误是否消失。

React App 某些 CSS 属性被忽略

React App Some CSS Properties Gets Ignored

reactjs

styled-components