tailwind语句无法对Bubble中的content起作用，但是dark修饰后起作用；

[GuanWhite]

重现步骤

import { Bubble } from '@ant-design/x';

export default function MessageBubbleBox({ contentText, avatarImage, isMe }) { const place = isMe ? 'end' : 'start'; // 当 isMe 为true时，meStyle = 'bg-red-500 text-white'，但Bubble组件无法正确渲染，只能渲染dark修饰过的样式 const meStyle = isMe ? 'bg-red-500 text-white' : 'dark:bg-[#71717a] dark:text-darkTextColor'; console.log(meStyle); return ( <Bubble classNames={{ content: meStyle, }} content={contentText} avatar={{ icon: avatarImage, }} placement={place} /> ); }

当前行为

用tailwind语法为content添加样式不起作用，仅当用dark修饰的样式才起作用

预期行为

No response

上下文

No response

版本

"@ant-design/x": "^1.2.0"

您在哪些浏览器上遇到了这个问题？

Chrome, Microsoft Edge

[dosubot[bot]]

Hello @GuanWhite! I'm here to help you solve bugs, answer questions, and assist you as you become a contributor. I'll be waiting for a human maintainer to join us, but feel free to share any details about your issue!

The issue you're experiencing with Tailwind CSS classes not applying to the content of the Bubble component, except when using dark mode styles, might be related to how the classNames prop is being handled within the component.

The classNames prop is expected to apply specific styles to different parts of the component, but if Tailwind CSS classes are not working as expected, it could be due to CSS specificity or how styles are being processed in the component. The dark mode styles might be working because they are being applied with higher specificity or through a different mechanism.

To troubleshoot this issue, you can try the following:

1. Ensure Tailwind CSS is properly configured: Make sure that Tailwind CSS is correctly set up in your project and that its styles are being loaded. Check your tailwind.config.js and ensure that the content array includes paths to your component files.

2. Check CSS specificity: Tailwind CSS classes might be overridden by other styles with higher specificity. You can try using !important in your Tailwind classes to see if that resolves the issue, although this is generally not recommended for long-term solutions.

3. Inspect the rendered HTML: Use your browser's developer tools to inspect the rendered HTML and see if the Tailwind classes are being applied to the content element. This can help identify if the classes are being added but not taking effect due to other styles.

4. Test with inline styles: As a temporary test, try applying inline styles directly to the content element to see if they take effect. This can help determine if the issue is with the application of styles in general or specifically with Tailwind CSS.

If these steps do not resolve the issue, it might be necessary to look into how the Bubble component processes the classNames prop and whether there are any known limitations or conflicts with Tailwind CSS.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}