避免全局css在PROD - REACT-NEXT应用程序中被覆盖

zrfyljdw 于 2023-08-04 发布在 React

关注(0)|答案(2)|浏览(98)

我不知道如何解决这个问题，因为我是REACT-NEXT的新手（我是一个Angular的家伙）。下面是我从另一个资源利用的元素，如

import example-custom-ele-parent, {example-custom-ele-child} from 'custom-tags/example-custom'

    <example-custom-ele-parent> 
      <example-custom-ele-child></example-custom-ele-child>
    </example-custom-ele-parent>

字符串
当我在我的localhost：3008中看到example-custom-ele-child的css时，在chrome浏览器中，它就像

.cqAcqQ {
  padding: 0.25rem;
}

型
我想在globals.css文件中添加一个规则，如

.cqAcqQ {
  padding: 0.25rem;
  border: 1rem solid red !important; // newly added by me
}

型
一切都在我的本地主机工作正常。但是在我部署之后，我所做的更改被新的random类覆盖，它变成了

.kXIDVb {
  padding: 0.25rem;
}

型
当前的软件包版本为

"next": "13.0.7",
"next-transpile-modules": "10.0.0",
"react": "18.2.0",
"react-dom": "18.2.0",

型
我尝试通过执行<example-custom-ele-child className={style['my-change']}></example-custom-ele-child>进行覆盖，但不允许出现类似**className={style ['my-change']**的错误
有人能在这方面指导我吗？
谢啦，谢啦

next.js

来源：https://stackoverflow.com/questions/76735599/avoid-global-css-getting-overridden-in-prod-react-next-app

2条答案

按热度按时间

mrfwxfqh1#

第一个主题-类名更改
答案：通过类的名称cqAcqQ我怀疑这是一个自动生成的类，这意味着每次构建都会有一个新的名称。在这种情况下，它更改为kXIDVb。也许你正在使用第三方组件，如material-ui或bootstrap。它们似乎在每次构建时生成随机的className。如果你分享子元素代码，我可以确认你。
第二个主题-为什么在组件中添加className不起作用
**答案：**原因是将className属性放到了自定义组件中。如果你想像这样添加className

<example-custom-ele-child className="test-classname" />

字符串
你需要确保在这个组件的定义中你正在处理这个属性。对于前。

const ExampleCustomEleChild = ({ className }) => {
    // you can also put the className directly in this div or whatever html element you have
    return (
        <div className={className}>test div here</div>
    )
}

型
让我知道如果它帮助或您可以在这里评论您的问题。

赞(0）回复(0）举报 2023-08-04

rdlzhqv92#

尝试添加样式如下：

<el className="yourClassName" style={{ margin: "2rem" }}></el>

字符串
但是如果你需要添加font-size之类的东西，在这种情况下：

<el className="yourClassName" style={{ fontSize: "2rem" }}></el>

型
希望能帮上忙！

赞(0）回复(0）举报 2023-08-04

我来回答

避免全局css在PROD - REACT-NEXT应用程序中被覆盖

2条答案

相关问题

热门标签

最新问答