bro is there any normalize css or a starting point of css for index.html in react ?

i stylized my componnet but deleted my index.html files is there any sane defaults for index.html in react pls

9 Replies

indeeOP•2y ago

actually the problem is this

indeeOP•2y ago

indeeOP•2y ago

i am using mantine component library and there is something called center which centers divs vertically and holizontally but am unable to

import { TextInput, Checkbox, Button, Group, Box, Center } from '@mantine/core';
import { useForm } from '@mantine/form';

export default function Demo() {
  const form = useForm({
    initialValues: {
      userName: '',
      email: '',
      password: '',
    },

    validate: {
      userName: (value) => (value.length >= 5 ? null : 'Invalid username'),
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
      password: (value) => (value.length >=8 ? null : 'Invalid password'),
    },
  });

  return (
    <Center maw={300} mx='auto'>
      <form onSubmit={form.onSubmit((values) => console.log(values))}>
        <TextInput
          withAsterisk
      type = 'text'
          label="Username"
          placeholder="enter your Username"
          {...form.getInputProps('userName')}
        />

        <TextInput
          withAsterisk
      type = 'email'
          label="Email"
          placeholder="[email protected]"
          {...form.getInputProps('email')}
        />

        <TextInput
          withAsterisk
      type = 'password'
          label="Password"
          placeholder="enter your password"
          {...form.getInputProps('password')}
        />

        <Group position="right" mt="md">
          <Button type="submit">Sign up</Button>
        </Group>
      </form>
    </Center>
  );
}

import { TextInput, Checkbox, Button, Group, Box, Center } from '@mantine/core';
import { useForm } from '@mantine/form';

export default function Demo() {
  const form = useForm({
    initialValues: {
      userName: '',
      email: '',
      password: '',
    },

    validate: {
      userName: (value) => (value.length >= 5 ? null : 'Invalid username'),
      email: (value) => (/^\S+@\S+$/.test(value) ? null : 'Invalid email'),
      password: (value) => (value.length >=8 ? null : 'Invalid password'),
    },
  });

  return (
    <Center maw={300} mx='auto'>
      <form onSubmit={form.onSubmit((values) => console.log(values))}>
        <TextInput
          withAsterisk
      type = 'text'
          label="Username"
          placeholder="enter your Username"
          {...form.getInputProps('userName')}
        />

        <TextInput
          withAsterisk
      type = 'email'
          label="Email"
          placeholder="[email protected]"
          {...form.getInputProps('email')}
        />

        <TextInput
          withAsterisk
      type = 'password'
          label="Password"
          placeholder="enter your password"
          {...form.getInputProps('password')}
        />

        <Group position="right" mt="md">
          <Button type="submit">Sign up</Button>
        </Group>
      </form>
    </Center>
  );
}

this is the component pls someone help me

Azyrum•2y ago

You deleted your index.html file? How are you rendering things then?

Kevin Powell•2y ago

My guess is the body needs a height... right now, it's centered, but the parent has no height. I don't know what maw={300} is doing either though... 🤔

indeeOP•2y ago

max-width=300px

max-width=300px

indeeOP•2y ago

indeeOP•2y ago

now i gave index.css the body and App.css the root styles cuz i have seen this when i initilized another crm even then its not working

indeeOP•2y ago

Gaming

Programming

bro is there any normalize css or a starting point of css for index.html in react ?