[英]How to use css-in-js in ant-design components?
Actually, A ReactJS web application inherited to me and it was initialized by CRA
and Ant-Design .实际上,我继承了一个 ReactJS web 应用程序,它由
CRA
和Ant-Design初始化。 I just worked with Material-UI and had no experience with And Design .我刚刚使用 Material-UI 并且没有使用And Design的经验。
The way Material-UI handles the styles is awesome but AntD uses less
to handle CSS. Material-UI 处理 styles 的方式很棒,但 AntD 使用
less
的方式来处理 CSS。 it's very hard for me to work like ancients.我很难像古人一样工作。
I searched a lot but didn't find a way to use JSS
[ CSS in JS ] in a project with Ant Design.我进行了很多搜索,但没有找到在 Ant 设计的项目中使用
JSS
[ CSS in JS ] 的方法。
I mean like below:我的意思如下:
import { AntDCompo } from 'antd';
import { Styled , injectStyled } from 'react-jss';
const MyCompo = ({ classes }) => (
<AntDCompo className={classes.container} />
);
const styles = Styled({
container: {
color: '#f00',
},
});
export default injectStyled(styles)(MyCompo);
But in the Ant Design docs just declare like ancient stuffs:但是在 Ant 设计文档中只是像古老的东西一样声明:
import { AntDCompo } from 'antd';
import styles from 'myCompoStyles.less';
const MyCompo = () => (
<AntDCompo className={styles.container} />
);
How I can do it?我该怎么做? or Is there any way to use JSS for AndD components?
或者有没有办法将 JSS 用于 AndD 组件?
As every CSS-in-JS, you can target the normal CSS-properties:与每个 CSS-in-JS 一样,您可以针对普通的 CSS 属性:
import { Icon } from 'antd';
const DarkHoverStyle = styled(Icon)`
color: gray;
:hover {
color: palevioletred;
}
`;
In some occasions you may need to target a specific antd
CSS class .在某些情况下,您可能需要针对特定的
antd
CSS class 。
const GlobalStyle = createGlobalStyle`
.ant-tooltip-inner {
background-color: palevioletred;
color: black;
}
`;
In the next example, we styled the hover color of an Icon
and the default styling of the Tooltip
component (changed the default black background):在下一个示例中,我们设置了
Icon
的 hover 颜色和Tooltip
组件的默认样式(更改了默认的黑色背景):
export default function App() {
return (
<FlexBox>
<GlobalStyle />
<Tooltip title="Github Icon">
<DarkHoverStyle type="github" style={{ fontSize: 100 }} />
</Tooltip>
</FlexBox>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.