我的目标是让我的标题和内容是100%的页面宽度。我没有css文件，而是使用mantine作为样式。我尝试过在不同的组件上编辑宽度到100%，但没有运气。一旦我的页面使用100%宽度，最终目标是使用显示网格来组织列中的组件。我希望我的WeatherComponent填充整个宽度，因此请输入gridColumnStart：1到4开始和结束的TodoList 1到2和开始和结束的NewsComponent 2到4。这是呈现组件的 Jmeter 板：

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文件来样式 *。