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

【问题标题】：filling 100% width of website using mantine使用 mantine 填充网站的 100% 宽度
【发布时间】：2023-01-31 07:58:18
【问题描述】：

我的目标是让页眉和内容占页面宽度的 100%。我没有 css 文件，而是使用 mantine 作为样式。我曾尝试在不同组件上将宽度编辑为 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 文件来设置 *.

【问题讨论】：

请提供一个最小的可重现示例。

标签： css reactjs react-bootstrap mantine

【解决方案1】：

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

在 WeatherComponent 中

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

【讨论】：

请将您的问题标记为已解决。
@IgorGonak 我不能两天
您的答案可以通过其他支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写出好的答案的信息in the help center。
不起作用，mantine 在容器元素上强制执行 max-width

【解决方案2】：

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

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

)

【讨论】：