Avatar component's 'color' attribute can't work

[liucaizhong]

Description

<Avatar color={1} circle glyph='search' size='xs' />
The color attibute can't work as expected, the background color is still blue.

Versions

fundamental-react:
"fundamental-react": "^0.11.0",

NOTE: Where applicable, please include uncropped screen captures.

DISCLAIMER:
After triaging an issue, the fundamental-react team will see if it can be reproduced or confirmed. If more information is needed, the fundamental-react team will contact the author. Any issues awaiting responses from the author for more than 7 days will be closed. The author can re-open the issue at a later time if they can present the requested information.

[github-actions]

Hello @liucaizhong, thank you for using fundamental-react! The fundamental-react team will triage your issue as soon as possible.

[jbadan]

Hi @liucaizhong , can you provide a link to your code? I'm not able to reproduce - see:
https://fundamental-react.netlify.app/?path=/docs/component-api-avatar--primary#accent-colors

[Luciferzhangyi]

Hi @jbadan ,

We imported both fundamental-styles & fundamental-react
Seems the default color from fundamental-styles overwrites the color we specified

[jbadan]

Hi @Luciferzhangyi Can I have a link to your react code? I see what's happening, but I can't recreate it. If it's SAP internal only, you can email it to me at j.badanowski@sap.com

When you say "We imported both fundamental-styles & fundamental-react" - are you importing avatar.css as well as the react component into your code? That could cause this. The react component is packaged with the css already and you shouldn't need to import anything from fundamental-styles.

[liucaizhong]

Hi @Luciferzhangyi Can I have a link to your react code? I see what's happening, but I can't recreate it. If it's SAP internal only, you can email it to me at j.badanowski@sap.com

When you say "We imported both fundamental-styles & fundamental-react" - are you importing avatar.css as well as the react component into your code? That could cause this. The react component is packaged with the css already and you shouldn't need to import anything from fundamental-styles.

Hi jbadan, as @Luciferzhangyi said, fundamental-styles override the fundamental-react's styles. It's the reason.
I would like to explain why we import both of them. Because we want to use more features in fd-styles which haven't realized in fd-react. So the question is how we use fd-styles's features correctly till fd-react will have them?

[Vita-Meow]

Hi, from my little point of view, I think the problem is the css styles defined in the generic selector ( [class*=fd-avatar] )override the staff that written in the specific class (.fd-avatar--accent-color-1) when we import the fundamental styles after fundamental react; But I was wondering whatever, something generic should never be able to override something specific; Can this [class*=fd-avatar] can change to be .fd-avatar, since each avartar should has the .fd-avatar class?

[jbadan]

@Luciferzhangyi @liucaizhong @Vita-Meow [class*=fd-avatar] should most likely be removed. That is an issue for fundamental styles - I will start a conversation there. If you're going to continue importing both fundamental-react and fundamental-styles, you will keep encountering unexpected issue and we cannot provide support for this situation.

You have 2 paths forward:

1. Contribute! We're open source and are happy to have new contributors. Check out our Developer Guide for getting started. The fundamental-react team is happy to review pull requests and provide assistance where necessary.
2. Open a new issue with your feature request. There's no timeline promises for when someone from the team would add this feature, but it would at least be on our radar.

I'm going to close this issue, feel free to reopen or create a new feature request issue.