Изменения фона у Headers и Button

[Donomas]

Проблема заключается в том, что при отладке на localhost моё приложение спокойно делает кнопку и фон div прозрачными благодаря background-color: transparent;. При загрузке приложения в VK mini Apps кнопка и Div становятся не прозрачными.

const Home = ({ id, go }) => {
	const [isClicked, setIsClicked] = useState(false);

	const handleButtonClick = () => {
		setIsClicked(true); // Set the button as clicked
		setTimeout(() => {
			go({ currentTarget: { dataset: { to: 'Persik' } } });
		}, 400);
	};

	return (
		<Panel id={id} centered={true}>
			<PanelHeader >Зацени приложение</PanelHeader>
				<div >
					<CustomButton onClick={handleButtonClick} className={isClicked ? 'clicked' : ''}>Отлично!</CustomButton>
				</div>
		</Panel>
	);
};

import './ButtonStyles.css';

const CustomButton = ({ children, onClick, className }) => {
    return (
        <button className={`customButton ${className}`} onClick={onClick}>
            {children}
        </button>
    );
};

return (
		<ConfigProvider appearance="dark" platform={'vkcom'}>
			<AdaptivityProvider>
				<AppRoot>
					<StarsAnimation activePanel={activePanel} />
					<SplitLayout header={<PanelHeader separator={false} transparent={true} style={{backgroundColor: "transparent"}}/>} >
						<SplitCol animate={false} >
							<View activePanel={activePanel} >
								<Home id='home' go={go} />
								<Sticker id='Persik' go={go} />
							</View>
						</SplitCol>
					</SplitLayout>
				</AppRoot>
			</AdaptivityProvider>
		</ConfigProvider>
	);

[inomdzhon]

Привет,

1. А ты не проверял в консоли VK Mini Apps не перезатирается ли background-color стилями Button?
2. На скриншотах это ведь так, как в localhost у тебя?

[Donomas]

Всё верно. Стандартные стили Button и Панели vkui игнорируют стили которые я указываю. В localhost у меня все более менее нормально потому что это не среда приложений vk)

[inomdzhon]

Хм

import { PanelHeader } from "@vkontakte/vkui";
// ...
const App = () => <PanelHeader transparent>Шапка</PanelHeader>

и

import { Button } from "@vkontakte/vkui";
// ...
const App = () => <Button mode="outline>Кнопка</Button>

должны срабатывать.

---

Ты мог бы воссоздать свой пример в CodeSandbox?

Могу предложить шаблон https://codesandbox.io/s/vkui-javascript-o1bvg2 (но обрати внимание, что там VKUI v5.4.1, тебе надо изменить на ту версию, которая у тебя сейчас).