使用mantine填充100%的网站宽度

Question

我的目标是让我的标题和内容是页面宽度的100%。我没有css文件，而是使用mantine的样式。我试过在不同的组件上编辑宽度到100%，但没有运气。最终的目标，一旦我有我的页面使用100%的宽度是使用显示网格来组织我的组件列。我想我的WeatherComponent填充全宽度，所以说gridColumnStart: 1到4TodoList开始和结束1到2和NewsComponent来开始和结束2到4。这是我渲染组件的仪表板:

import { Container } from '@mantine/core';
import { Group } from '@mantine/core';
import NewsComponent from '../components/NewsComponent';
import TodoList from '../components/TodoList';
import WeatherComponent from '../components/WeatherComponent';
const Dashboard = () => {
return (
<Container style={{ display: 'grid', gap: '20px' }}>
<Group style={{ gridColumn: '1 / span 3' }}>
<WeatherComponent />
</Group>
<Group style={{ gridColumnStart: 1, gridColumnEnd: 1.5 }}>
<TodoList />
</Group>
<Group style={{ gridColumnStart: 1.5, gridColumnEnd: 3 }}>
<NewsComponent />
</Group>
</Container>
);
};
export default Dashboard;

这是我的WeatherComponent它基本上是作为我的Header:

import axios from 'axios';
import { Weather } from '../types';
import UserForm from './UserForm';
import { Title, Text, Container } from '@mantine/core';
import { useEffect, useState, createContext } from 'react';
export const WeatherContext = createContext<any>(null);
const WeatherComponent = () => {
const [weather, setWeather] = useState<Weather | null>();
const fetchWeatherData = async () => {
const response = await axios.get('http://mock-api-call/weather/get-weather');
setWeather(response.data.result.weather);
};
useEffect(() => {
fetchWeatherData();
}, []);
return (
<Container>
<WeatherContext.Provider value={weather?.forcast}>
<UserForm />
</WeatherContext.Provider>
<Title order={2}>Today&apos;s Weather</Title>
<Text size="lg">
{weather?.forcast} with a low of {weather?.min} and a high of {weather?.max}
</Text>
<Text size="md" data-testid="description">
{weather?.description}
</Text>
</Container>
);
};
export default WeatherComponent;

理想情况下，我想使用mantine样式达到100%，而不是创建一个css文件来样式*.

Answer 1

要防止在容器元素上强制执行max-width，请在容器上使用fluidprop。

return (
<Container fluid>
{content}
</Container
)

Answer 2

解决!我把WeatherComponents容器的宽度改为100%，它解决了这个问题。

在WeatherComponent

return (
<Container style={{ width: '100%' }}>
)