# post-carousel/4.0.8/src/global-settings/custom-css/customCss.js

Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News, version 4.0.8. 52 lines.

- Page: https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/global-settings/custom-css/customCss.js
- Raw: https://pluginprobe.com/plugins/post-carousel/4.0.8/raw/src/global-settings/custom-css/customCss.js
- Modified: 2026-09-02T10:51:28+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/post-carousel/4.0.8/code/src/global-settings/custom-css/customCss.js#L10-L20`.

```javascript
import { __ } from "@wordpress/i18n";
import { PanelBody } from "@wordpress/components";
import Editor from "@monaco-editor/react";
import { useDispatch, useSelect } from "@wordpress/data";

const CustomCss = () => {
	const customCss = useSelect((select) => select("smartpost/global-settings").getCustomCSS());

	const { setCustomCSS } = useDispatch("smartpost/global-settings");

	return (
		<PanelBody title={__("Custom CSS", "post-carousel")} initialOpen={false}>
			<p className="sp-smart-post-component-title sp-smart-mb-5">
				Use this area to add CSS and customize the page to your preference.
			</p>

			<Editor
				height="200px"
				defaultLanguage="css"
				theme="vs-dark"
				defaultValue=""
				value={customCss}
				onChange={(e) => setCustomCSS(e)}
				options={{
					quickSuggestions: {
						other: "on",
						comments: "off",
						strings: "off",
					},
					quickSuggestionsDelay: 10,
					minimap: {
						enabled: false,
					},
					scrollbar: {
						vertical: "auto",
						horizontal: "auto",
						verticalScrollbarSize: 5,
						horizontalScrollbarSize: 5,
						scrollByPage: false,
						ignoreHorizontalScrollbarInContentHeight: false,
					},
					lineNumbersMinChars: 1,
					folding: false,
					wordWrap: "on",
				}}
			/>
		</PanelBody>
	);
};

export default CustomCss;

```