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

w6lpcovy  于 2023-02-01  发布在  其他
关注(0)|答案(2)|浏览(152)

我的目标是让我的标题和内容是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文件来样式 *。

mi7gmzs6

mi7gmzs61#

解决了!我将WeatherComponents容器的宽度更改为100%,它修复了这个问题。
在天气组件中

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

4jb9z9bj2#

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

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

)

相关问题