# Styling

{% hint style="info" %}
To ensure that the library will not style any other elements on a page, all CSS classes are prefixed with**`` `easy-edit-` ``**.  If would like to style all `EasyEdit` components then you could overwrite all the default classes that the library provides
{% endhint %}

## Viewing

All `EasyEdit` components are wrapped around a div with the class `easy-edit-wrapper` in it. If the component's `allowEdit` prop is set to false, then class `easy-edit-not-allowed` is added to the wrapper div which just changes the mouse cursor to 🚫 (not allowed). In case of hovering over it, the class `easy-edit-hover-on` is appended to it which changes the cursor to 👆 (pointer) and applies an italic style to the placeholder/value.

```markup
<!-- EasyEdit HTML in View mode -->
<div class="easy-edit-wrapper">Click to edit</div>

<!-- EasyEdit HTML in View mode while hovering over it -->
<div class="easy-edit-hover-on easy-edit-wrapper">Click to edit</div>

<!-- EasyEdit HTML in View mode when allowEdit is set to false -->
<div class="easy-edit-not-allowed easy-edit-wrapper">Can't edit me</div>
```

### Viewing with Edit button

When the `hideEditButton` prop is set to `false`, the "Edit" button is visible while the component is in its *View* state wrapped in a div with the `easy-edit-view-button-wrapper` css class in it.

```html
<div class="easy-edit-wrapper">
  Click to edit
  <div class="easy-edit-view-button-wrapper">
    <button class="easy-edit-button" name="edit">Edit</button>
  </div>
</div>
```

## Editing

Things become a bit more complicated in edit mode. As before, all `EasyEdit` components are wrapped around a div with the class `easy-edit-inline-wrapper` in it but this time, we have a few more containers.

```markup
<!-- EasyEdit HTML in Edit mode -->
<div class="easy-edit-inline-wrapper" tabindex="0">
  <div class="easy-edit-component-wrapper">
    <input type="text" placeholder="Click to edit" autocomplete="off" value="">
  </div>
  <div class="easy-edit-button-wrapper">
    <button class="easy-edit-button" name="save">Save</button>
    <button class="easy-edit-button" name="cancel">Cancel</button>
  </div>
  <div class="easy-edit-instructions">Click save to see what happens</div>
  <div class="easy-edit-validation-error">What just happened?</div>
</div>
```

### Component

Each component is wrapped around a div with the class `easy-edit-component-wrapper`.

### Instructions

If provided, a div with the class `easy-edit-instructions` will be generated and placed within the main container. In not then no div container will be generated for instructions

### Buttons

All buttons ("Save", "Cancel", "Delete and "Edit") have a default class added to them which is `easy-edit-button`.

## Validating

If validation fails on an `EasyEdit` component, then a validation message is shown back to the user which is wrapped around a div with the class `easy-edit-validation-error`. By default, the styling that's applied to the component just changes the font colour to red.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://giorgosart.gitbook.io/react-easy-edit/styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.