# Css not working

**URL:** <https://community.hubspot.com/t/css-not-working/135129>\
**Category:** APIs & Integrations\
**Tags:** free\
**Created:** [June 25, 2025, 6:43am UTC](https://community.hubspot.com/t/css-not-working/135129 "2025-06-25T06:43:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sagar\_tomar1](https://avatars.discourse-cdn.com/v4/letter/s/bc8723/32.png) [@sagar\_tomar1](https://community.hubspot.com/u/sagar_tomar1)\
**Post date:** [June 25, 2025, 6:43am UTC](https://community.hubspot.com/t/css-not-working/135129/1 "2025-06-25T06:43:19Z")

</div>

import React, { useState, useEffect, useRef } from ‘react’;

import {

Button,

Modal,

ModalBody,

Text,

TextArea,

Box,

Flex,

hubspot,

// You might need to import specific color tokens if available

// For example, if HubSpot provides a ‘neutral’ or ‘light’ background

// import { colors } from ‘@hubspot/ui-extensions/theme’; // This is an example, check actual docs

} from ‘@hubspot/ui-extensions’;

hubspot.extend(() =\> \<Extension /\>);

const Extension = () =\> {

return (

\<Button

overlay={

\<Modal id=“chatbot-modal” title=“MCUTILITY” width=“md”\>

\<ModalBody\>

\<Box direction=“column” gap=“md” padding=“md”\>

\<ChatBotUI /\>

\</Box\>

\</ModalBody\>

\</Modal\>

}

\>

Send SMS

\</Button\>

);

};

const ChatBotUI = () =\> {

const [messages, setMessages] = useState([

{ from: ‘bot’, text: ‘Hi there! How can I assist you today?’ },

]);

const refChatUi = useRef(null);

const [input, setInput] = useState(‘’);

const handleSend = () =\> {

if (!input.trim()) return;

const newMessages = [

…messages,

{ from: ‘user’, text: input },

{ from: ‘bot’, text: `You said: “${input}”. How else can I help?` },

];

setMessages(newMessages);

setInput(‘’);

};

useEffect(() =\> {

// Scroll to bottom of messages if needed

if (refChatUi.current) {

refChatUi.current.scrollTop = refChatUi.current.scrollHeight;

}

}, [messages]);

return (

\<Box direction=“column” height=“400px”\> {/\* Added height for scrollable area \*/}

{/\* Message display area \*/}

\<Box

direction=“column”

gap=“xs”

padding=“sm”

borderRadius=“md”

marginBottom=“xs”

overflowY=“auto” // Make message area scrollable

ref={refChatUi} // Attach ref here

// The styling for the chat bubbles themselves

// Instead of setting background on the container, set it on individual message boxes

\>

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

\<Flex

key={idx}

justifyContent={msg.from === ‘user’ ? ‘flex-end’ : ‘flex-start’}

\>

\<Box

padding=“sm”

borderRadius=“md”

width=“fit-content” // Make the bubble fit content

style={{

// Here’s where you’d apply the specific colors for each bubble

backgroundColor: msg.from === ‘bot’ ? ‘#e5e5ea’ : ‘#007bff’, // Example: light grey for bot, blue for user

color: msg.from === ‘bot’ ? ‘#000’ : ‘#fff’, // Example: black for bot, white for user

}}

\>

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

\</Box\>

\</Flex\>

))}

\</Box\>

{/\* Input and Send button \*/}

\<Box direction=“column” gap=“xs” marginTop=“auto”\> {/\* Push input to bottom \*/}

\<TextArea

placeholder=“Type your message…”

value={input}

onChange={(value) =\> setInput(value)}

rows={2}

/\>

\<Button onClick={handleSend}\>Send\</Button\>

\</Box\>

\</Box\>

);

}; Thank you in advance . Styling is not working when I open this card in hubspots

---

<div class="post-metadata">

**Author:** ![TomM2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tomm2/32/70887_2.png) [@TomM2](https://community.hubspot.com/u/TomM2)\
**Post date:** [June 25, 2025, 12:39pm UTC](https://community.hubspot.com/t/css-not-working/135129/2 "2025-06-25T12:39:10Z")

</div>

Hey [@sagar\_tomar1](https://community.hubspot.com/t5/user/viewprofilepage/user-id/958224) do you see your CSS visible in the DOM when you load your card? Or is it visible within inspect element on those elements?