My tag is taking style from another tag-CodePudding

<FormWrap>  
    <FormImg img src='./img/CB.png' alt="CB" /> 
    <FormContent>                   
       <Form onSubmit={handleSubmit}>
           {errorMessage && (<p className="errorM"> {errorMessage} </p>)}
           <FormH1>Log in to your account</FormH1>
           <FormLabel htmlFor='for'>Email</FormLabel>
           <FormInput type='text' value={email} required
            onChange={e => setemail(e.target.value)}/>
           <FormLabel htmlFor='for'>Password</FormLabel>
           <FormInput type='password' value={password} required 
            onChange={e => setpassword(e.target.value)}/>
           <FormButton type='submit'>Sign in</FormButton>
     <Navtext>
        <NavtextLink to="/Register">Register</NavtextLink>
     </Navtext>

    </Form> 
                        
                         
      </FormContent>
</FormWrap>

export const errorM = styled.p`
    width:1000px;
    height:692px;
    background:black;
    color:white;
    display:grid;
    grid-template-columns: 1fr 6fr;
    position:relative;
    
    border-radius:10px;
    `


export const FormWrap = styled.div`
    width:800px;
    height:692px;
    background:white;
    color:yellow;
    display:grid;
    grid-template-columns: 1fr 6fr;
    position:relative;
    
    border-radius:10px;


    @media screen and (max-width: 980px){
        height:95%;
        padding:50px;


    }

    @media screen and (max-width: 720px){
        height:90%;
        padding-left:95px;
    }
`

The thing is that errorM is taking the style from FormWrap even through the one is

and the other is <div.I tried to make inline style but then only that I managed to change was the cooler of the texts tried to change the fond but nothing happened.

CodePudding user response：

It looks like you're trying to use styled-components to style your form. In order for your errorM component to have its own styles, you need to create a new styled component for it, like this:

const ErrorM = styled.p`
  width: 1000px;
  height: 692px;
  background: black;
  color: white;
  display: grid;
  grid-template-columns: 1fr 6fr;
  position: relative;
  border-radius: 10px;
`;

Then, you can use this component in your form like this:

<ErrorM>{errorMessage}</ErrorM>

Styled-components work by creating new components that have the styles you define applied to them. So, if you want to style an element differently from its parent element, you need to create a new styled component for that element.

CodePudding user response：

In your first code example, the  has the className "errorM". And in your second code example, you have created a styled component called "errorM".

When you create a styled component the variable should start with a capital letter, for example, ErrorM.

There are two ways to add the style to  tag.

Applying style to the className. Change export const errorM = styled.p to .errorM { ... }.
Using the styled component instead of adding className to . Change {errorMessage} to <ErrorM>{errorMessage}</ErrorM>

CodePudding user response：

use id to specify particular paragraph

<!DOCTYPE html>
<html>
<head>
  <style>
  #one{
  color:blue;
  }
  </style>  
  <title>Browser</title>
</head>

<body>
    <h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p id="one">
This is paragraph
</p>

</body>

</html>