英文:
Styled component not overriding default styles for antd components
问题
我已经将自定义主题应用于多个antd组件，并且它们都正常工作。但在处理最近的一些组件（日期选择器和模态框）时，覆盖的样式没有应用。
在检查时，我看到应用的类样式，而我的自定义样式无法覆盖它。有什么建议或提示可以绕过这个问题吗？
上面的图片显示了这个问题。在.ant-modal-title中应用的样式被覆盖了。我不确定".css-dev-only-do-not-override-sk7ap8"是什么意思？这是否表示这个类无法被覆盖？
英文:
I have been applying a custom theme to several antd components and they have gone and worked fine. When working on the several past few components (datepicker and modal) the overridden styles are not applying.
When inspecting I am seeing this class style that is being applied and my custom style refuses to override it. Any suggestions or tips to bypass this issue?
The picture above shoes the issue. The style applied in .ant-modal-title is being overwritten. I am unsure what it means by ".css-dev-only-do-not-override-sk7ap8"? Does this indicate this class can NOT be overridden?
答案1
得分: 1
如果你在使用 `styled-components`，你可以通过以下方式覆盖默认样式：
import styled from 'styled-components';
import { Button } from 'antd';
const ButtonWrapper = styled(Button)`
height: auto;
padding: 8px;
font-size: ${({ theme }) => theme.colors.fontSizeBase};
font-weight: 700;
line-height: 17px;
&.ant-btn-default {
color: ${({ theme }) => theme.colors.primaryColor};
border: 1px solid ${({ theme }) => theme.colors.primaryColor};
&:not(:disabled):not(.ant-btn-disabled):hover {
color: ${({ theme }) => theme.colors.primaryColor};
border: 1px solid ${({ theme }) => theme.colors.primaryColor};
}
}
&.ant-btn-primary {
background-color: ${({ theme }) => theme.colors.primaryColor};
color: ${({ theme }) => theme.colors.white};
border: 1px solid ${({ theme }) => theme.colors.primaryColor};
&:not(:disabled):not(.ant-btn-disabled):hover {
background-color: ${({ theme }) => theme.colors.primaryColor};
border: 1px solid ${({ theme }) => theme.colors.primaryColor};
}
}
&.ant-btn-link {
color: ${({ theme }) => theme.colors.primaryColor};
&:not(:disabled):not(.ant-btn-disabled):hover {
color: ${({ theme }) => theme.colors.primaryColor};
}
}
`;
export default ButtonWrapper;
英文:
If you are using styled-components, you can override default styled by using this approach:
import styled from 'styled-components';
import { Button } from 'antd';
const ButtonWrapper = styled(Button)`
height: auto;
padding: 8px;
font-size: ${({ theme }) => theme.colors.fontSizeBase};
font-weight: 700;
line-height: 17px;
&.ant-btn-default {
color: ${({ theme }) => theme.colors.primaryColor};
border: 1px solid ${({ theme }) => theme.colors.primaryColor};
&:not(:disabled):not(.ant-btn-disabled):hover {
color: ${({ theme }) => theme.colors.primaryColor};
border: 1px solid ${({ theme }) => theme.colors.primaryColor};
}
}
&.ant-btn-primary {
background-color: ${({ theme }) => theme.colors.primaryColor};
color: ${({ theme }) => theme.colors.white};
border: 1px solid ${({ theme }) => theme.colors.primaryColor};
&:not(:disabled):not(.ant-btn-disabled):hover {
background-color: ${({ theme }) => theme.colors.primaryColor};
border: 1px solid ${({ theme }) => theme.colors.primaryColor};
}
}
&.ant-btn-link {
color: ${({ theme }) => theme.colors.primaryColor};
&:not(:disabled):not(.ant-btn-disabled):hover {
color: ${({ theme }) => theme.colors.primaryColor};
}
}
`;
export default ButtonWrapper;
答案2
得分: 0
尝试使用在此链接中描述的 ConfigProvider：https://ant.design/docs/react/customize-theme
英文:
Try to use ConfigProvider described in: https://ant.design/docs/react/customize-theme
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论