ant-design/docs/blog/css-tricks/condition.tsx

32 lines
639 B
TypeScript

import React from 'react';
import { Flex } from 'antd';
const styleTxt = `
.blog-css-tricks {
border: 1px solid #0958d9;
width: 200px;
height: 50px;
}
.blog-css-tricks {
@container style(--custom-var) {
p {
color: green;
}
}
}
`;
const Block = (props: { children: React.ReactNode; style?: React.CSSProperties }) => (
<div className="blog-css-tricks" style={props.style}>
<p>{props.children}</p>
</div>
);
export default () => (
<Flex vertical gap="middle">
<style>{styleTxt}</style>
<Block>Without CSS Var</Block>
<Block style={{ '--custom-var': '0px' }}>With CSS Var</Block>
</Flex>
);