Some CSS Styles can't be changed

[arielmoraes]

I'm trying to customize some styles, but DeepChat ignores some of them, eg the border. I want to remove only the top border, but the outer container always have a full border, how can I unset the border (or any other style) and apply specific values?

[OvidijusParsiunas]

Hi @arielmoraes.

Simply using style or chatStyle should suffice:

E.g:

<deep-chat style="border: unset"></deep-chat>

<deep-chat chatStyle='{"border": "unset"}'></deep-chat>

chatElementRef.style.border = 'unset';

chatElementRef.chatStyle = {border: 'unset'};

If this does not work for you, can you provide me more information about the framework and configuration you are using.

Thanks!

[arielmoraes]

I've tried using chatStyle as follows:

deepChat.chatStyle = {
      border: 'unset',
      borderTop: '0'
 }

This results in the style being applied in the browser as:

element.style {
    border: unset;
    height: 350px;
    width: 320px;
    font-family: Inter, sans-serif, Avenir, Helvetica, Arial;
    font-size: 0.9rem;
    background-color: white;
    position: relative;
    overflow: hidden;
}

The border property is taking precedence somehow.

I solved that by using a custom class with !important on the border-top property.

I'm using the Lit framework to build a component on top of Deep Chat. By the way, great job on it.

[OvidijusParsiunas]

That is very interesting.

The border: unset; style was applied correctly to the browser DOM, but you were still seeing a border on the top? 🤷

I'm happy that you were able to resolve your issue, might you have any insight on why this was happening just for anyone that comes across a similar issue?

Thanks!

[arielmoraes]

No, I want to SET only the border top, my example was misleading because the border top was 0. The problem is that even by setting the border to unset, the specific styles are ignored, so if I have a border top set as 1px it'll not work as expected,

[OvidijusParsiunas]

My apologies. I misunderstood your initial message.

I was able to reproduce your problem and was able to add a fix for it.
To note, the problem was that the component style is controlled via a CSSStyleDeclaration object, which prioritises all shorthand properties over individual properties, and because Deep Chat sets a border property by default, when you attempted to set a borderTop property it still prioritised the border property style.

This has been fixed in deep-chat-dev and deep-chat-react-dev packages version 9.0.206. These packages work exactly like the core ones, except their names are different.

I will keep this issue open until the fix has been released in the core packages. Thankyou!