使用甘露台填充100%宽度的网站

Question

我的目标是使我的标题和内容达到页面宽度的100%。我没有css文件，而是使用曼丁作为样式。我试着在不同的组件上编辑宽度到100%，但没有运气。一旦我获得了使用100%宽度的页面，最终目标就是使用显示网格将组件组织在列中。我希望我的WeatherComponent填充整个宽度，比如gridColumnStart: 1到4 TodoList表示开始和结束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，它基本上是作为我的标题：

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

解决了！我将WeatherComponents容器的宽度更改为100%，它修复了这个问题。

在WeatherComponent中

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