# 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.