Unable to add custome css

Developer Support CMS Development
1

SagarTomar_0-1750829582711.png
SagarTomar_0-1750829582711.png657×707 51.3 KB

Thank you in advance.

I am sharing this screenshot to show the issue I’m facing. I want to wrap the above content within the card, but when I send a message or add text, the height of the card increases dynamically.

I’m currently unable to apply custom styles to this component to control its layout or height. Could you please guide me on how to style this component properly to prevent it from expanding unnecessarily?

i am using this @hubspot/ui-extensions

2

Hey @SagarTomar,

custom styles are not supported in UI-Extensions.

HubSpot did an amazing job providing a Figma Design Kit containing all available styles and classes. You should check it out

best,

Anton

3

Hi Anton,
Thank you for your response.
I need some help with this code. I’m trying to add custom styling to the Box
component — specifically:
height: 200px;
overflow: auto;
i am adding my code below .
/* or overflow: scroll; */
return (
direction=“column”
gap=“xs”
padding=“sm”
borderRadius=“md”
marginBottom=“xs”
overflowY=“auto”
ref={refChatUi}
>
{messages.map((msg, idx) => (
key={idx}
justifyContent={msg.from === ‘user’ ? ‘flex-end’ : ‘flex-start’}
>
padding=“sm”
borderRadius=“md”
width=“fit-content”
style={{
backgroundColor: msg.from === ‘bot’ ? ‘#e5e5ea’ : ‘#007bff’,
color: msg.from === ‘bot’ ? ‘#000’ : ‘#fff’,
}}
>
{msg.text}
))}
<br> placeholder=“Type your message…”<br> value={input}<br> onChange={(value) => setInput(value)}<br> rows={2}<br> /><br> <Button onClick={handleSend}>Send</Button><br> </Box><br> </Box><br> );<br> );

4

Hey @SagarTomar,

as mentioned - UIE don’t support custom style.

So you have to change or remove something like

style={{
backgroundColor: msg.from === 'bot' ? '#e5e5ea' : '#007bff',
color: msg.from === 'bot' ? '#000' : '#fff',

}}

You can find everything that’s possible in the Figma Design Kit. If you don’t find it in the Figma File, it’s (currently) not possible.

Also, here’s a list of all available UIE components

best,

Anton

5

Hii @Anton

Thank you for response . overflow box is not working.can you correct this code for me .my code is not working in hubspots

my code is below

<Box

direction=“column”

gap=“xs”

padding=“sm”

borderRadius=“md”

height=“20%”

overflow=“auto”

>

{messages.map((msg, idx) => (

\<Box key={idx}>

  \<Box

    padding="sm"

    borderRadius="md"

    width="fit-content"

  >

    \<Text>{msg.text}\</Text>

  \</Box>

\</Box>

))}

</Box>

6

Hi @SagarTomar

When working with HubSpot’s @hubspot/ui-extensions, one common challenge is not being able to control the card height using regular CSS. This is because HubSpot wants all UI extensions to look and behave consistently, so it limits how much you can customize styles directly.

Why does the card keep expanding:

  • Built-in components (like Card, Text, Flex, etc.) come with their own styles and behavior.
  • Layout behavior: These components use Flexbox or similar layout rules, which means containers (like cards) automatically grow to fit their content.
  • No direct CSS: You usually can’t use custom CSS to control things like height or scrolling. HubSpot does this on purpose to keep designs uniform.
  • Style via props: Instead of CSS, you use props (like gap, align, or truncate) to tweak layout and appearance.

What you can do:

  • Use Flex and Box: These are your main layout tools. They let you control how content is arranged inside your card.
  • Fix size of inner items: You may not be able to fix the height of the card itself, but you might be able to limit the size of the items inside (like setting a maxWidth on a text element).
  • Avoid long content: Keep the content inside cards short and to the point.
  • Use truncate for text: The truncate prop cuts off long text with an ellipsis and can show the full message on hover.
import { Card, Text, Flex } from '@hubspot/ui-extensions';

const MyCardExtension = ({ message }) => {
 return (
 <Card title="My Dynamic Card">
 <Flex direction="column" gap="small">
 <Text truncate={{ tooltipText: message, maxWidth: 300 }}>
 {message}
 </Text>
 </Flex>
 </Card>
 );
};

If your content needs more space:
Instead of forcing everything into a small card, think about showing it in a modal window or a new tab in the CRM. HubSpot provides tools like actions.openModal() or actions.openIframeInModal() for exactly this kind of use case.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.

Thanks!