выделение стилей из общего файла

src/components/Display.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import {CaretUpOutlined, CaretDownOutlined, CaretRightOutlined} from '@ant-design/icons'
 import moment from 'moment';
+import '../styles/display.css'
 
 export const formatNumber = (value, format) => 
   Number.isInteger(format) && Number.isFinite(value)

src/components/WellTreeSelector.jsx

@@ -5,6 +5,7 @@ import LoaderPortal from './LoaderPortal'
 import { TreeSelect } from 'antd'
 import { useHistory } from 'react-router-dom'
 import notify from './notify'
+import '../styles/wellTreeSelect.css'
 
 export default function WellTreeSelector() {
   const [wellsTree, setWellsTree] = useState([])

src/styles/App.less

@@ -1,5 +1,10 @@
 @import '~antd/dist/antd.less';
 @import './loader.css';
+/*
+*   ЭТО ФАЙЛ НАСТРОЙКИ ТЕМЫ И КОМПОНЕНТОВ ТЕМЫ.
+*   НЕ ПИШИТЕ ТУТ СТИЛИ ДЛЯ КАСТОМНЫХ КОМПОНЕНТОВ.
+*/
+
 // Переменные для темы тут:
 // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
 
@@ -108,52 +113,6 @@ html {
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-.display_flex_container{
-  display: flex;
-  flex-wrap: wrap;
-  flex: auto;
-}
-.display_header {
-  font-size: 16px;
-  flex-grow: 1;
-  display: flex;
-}
-
-.display_label{
-  font-size: 16px;
-  color: rgb(70, 70, 70);
-  text-align: left;
-  justify-content: center;
-  margin: 1px 1rem 1px 1rem;
-  flex: auto;
-  align-items: baseline;
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  height: 30px;
-}
-
-.display_value{
-  font-size: 18px;
-  font-weight: bold;
-  color: rgb(50, 50, 50);
-  text-align: right;
-  justify-content: flex-end;
-  align-items:baseline;
-  margin: 1px 1rem;  
-  flex: auto;
-}
-
-.display_small_value{
-  color: rgb(50, 50, 50);
-  text-align: right;
-  justify-content: center;
-  margin: 1px 1rem 1px 1rem;
-  flex: auto;
-}
-
 .menu-title,
 .chart-footer {
   display: flex;
@@ -182,23 +141,3 @@ tr.table_row_size {
   margin-right: 5px;
   margin-left: 5px;
 }
-
-.header-tree-select {
-  width: 300px
-}
-
-.header-tree-select *{
-  color: #fff;
-  font-size: 1rem;
-}
-
-.header-tree-select{
-  width: 300px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.header-tree-select:hover{
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  background-color: rgba(0, 0, 0, 0.5);
-}

src/styles/display.css

@@ -0,0 +1,46 @@
+
+.display_flex_container{
+  display: flex;
+  flex-wrap: wrap;
+  flex: auto;
+}
+.display_header {
+  font-size: 16px;
+  flex-grow: 1;
+  display: flex;
+}
+
+.display_label{
+  font-size: 16px;
+  color: rgb(70, 70, 70);
+  text-align: left;
+  justify-content: center;
+  margin: 1px 1rem 1px 1rem;
+  flex: auto;
+  align-items: baseline;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  height: 30px;
+}
+
+.display_value{
+  font-size: 18px;
+  font-weight: bold;
+  color: rgb(50, 50, 50);
+  text-align: right;
+  justify-content: flex-end;
+  align-items:baseline;
+  margin: 1px 1rem;  
+  flex: auto;
+}
+
+.display_small_value{
+  color: rgb(50, 50, 50);
+  text-align: right;
+  justify-content: center;
+  margin: 1px 1rem 1px 1rem;
+  flex: auto;
+}

src/styles/grid.css

@@ -0,0 +1,9 @@
+.grid_container{
+  display: grid;
+  column-gap: 4px;
+  row-gap: 4px;
+  /* grid-template-columns: repeat(6, 1fr);
+  grid-template-rows:  repeat(9, 1fr); */
+  justify-items: stretch;
+  align-items: stretch;
+}

src/styles/wellTreeSelect.css

@@ -0,0 +1,19 @@
+.header-tree-select {
+  width: 300px
+}
+
+.header-tree-select *{
+  color: #fff;
+  font-size: 1rem;
+}
+
+.header-tree-select{
+  width: 300px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.header-tree-select:hover{
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.5);
+}