📝 [#5066] Update frontend documentation

Added a (short) section on how to add custom styling of admin components.

docs/developers/frontend/admin-styling.rst

@@ -0,0 +1,42 @@
+.. _developers_frontend_admin_styling:
+
+Admin styling
+=============
+Custom styling of admin components can be realized by adding/updating .scss files,
+which are located in ``src/openforms/scss``.
+
+Adding a custom style
+---------------------
+The steps below describe how to add custom styling for a component in the admin, with the
+help of an example ``div`` component:
+
+.. code-block:: html
+
+    <div className="json-dump-variables json-dump-variables--horizontal">
+        ...
+    </div>
+
+1. Create a new file called ``_component-file-name.scss`` in ``src/openforms/scss/components/admin``,
+   where ``component-file-name`` reflects the class name of the component. For example: ``_json-dump-variables.scss``
+
+2. Add the custom styling. For example:
+
+   .. code-block:: scss
+
+       .json-dump-variables {
+         display: flex;
+
+         @include bem.modifier('horizontal') {
+           align-items: center;
+           gap: 0.5em;
+         }
+       }
+
+3. To ensure it gets picked up, add an import of the file name (without underscore) to the ``_index.scss``
+   file of the parent directory. For example, in ``src/openforms/scss/components/admin/_index.scss``):
+
+   .. code-block:: scss
+
+       ...
+       @import './json-dump-variables';
+       ...

docs/developers/frontend/index.rst

@@ -145,3 +145,12 @@ This script can handle current and future NPM packages published in the
 .. _FormatJS: https://formatjs.github.io/
 .. _react-intl: https://formatjs.github.io/docs/getting-started/installation
 .. _react-intl storybook addon: https://storybook.js.org/addons/storybook-react-intl
+
+
+Topics
+======
+
+.. toctree::
+   :maxdepth: 1
+
+   admin-styling