[2144] Fix default properties values for widgets with no style

Bug: #2144 Signed-off-by: Axel RICHARD <[email protected]>
eclipse-sirius · Jul 7, 2023 · 1322930 · 1322930
1 parent 59b2fc7
commit 1322930
Show file tree

Hide file tree

Showing 21 changed files with 102 additions and 101 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -46,6 +46,7 @@ An absent/empty candidates expression now simply means the widget is empty.
 - https://github.com/eclipse-sirius/sirius-components/issues/2112[#2112] [form] Fix the pages filtering in form editor.
 - https://github.com/eclipse-sirius/sirius-components/issues/2152[#2152] [tree] Fix an issue where some characters typed in the filter bar raised exception
 - https://github.com/eclipse-sirius/sirius-components/issues/2155[#2155] [explorer] Fix an issue where representations leaf tree items were not expanded by Expand All action
+- https://github.com/eclipse-sirius/sirius-components/issues/2144[#2144] [form] Fix the default properties values for widgets with no style.
 
 === New Features
 

diff --git a/...descriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ButtonWidget.tsx b/...descriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ButtonWidget.tsx
@@ -24,16 +24,16 @@ const useStyles = makeStyles<Theme, ButtonStyleProps>((theme) => ({
   style: {
     backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : theme.palette.primary.light),
     color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'white'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     '&:hover': {
       backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : theme.palette.primary.main),
       color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'white'),
-      fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-      fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-      fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+      fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+      fontStyle: ({ italic }) => (italic ? 'italic' : null),
+      fontWeight: ({ bold }) => (bold ? 'bold' : null),
       textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     },
   },

diff --git a/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LabelWidget.tsx b/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LabelWidget.tsx
@@ -19,10 +19,10 @@ import { LabelWidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles<Theme, LabelStyleProps>((theme) => ({
   style: {
-    color: ({ color }) => (color ? color : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    color: ({ color }) => (color ? color : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   selected: {

diff --git a/...rmdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx b/...rmdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx
@@ -19,10 +19,10 @@ import { LinkWidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles<Theme, LinkStyleProps>((theme) => ({
   style: {
-    color: ({ color }) => (color ? color : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    color: ({ color }) => (color ? color : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   selected: {

diff --git a/...rmdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ListWidget.tsx b/...rmdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ListWidget.tsx
@@ -27,10 +27,10 @@ import { ListWidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles<Theme, ListStyleProps>((theme) => ({
   style: {
-    color: ({ color }) => (color ? color : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    color: ({ color }) => (color ? color : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   icon: {

diff --git a/...iptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx b/...iptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx
@@ -23,11 +23,11 @@ import { MultiSelectWidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles<Theme, MultiSelectStyleProps>((theme) => ({
   style: {
-    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : 'inherit'),
-    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : null),
+    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   selected: {

diff --git a/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RadioWidget.tsx b/...mdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/RadioWidget.tsx
@@ -22,10 +22,10 @@ import { RadioWidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles<Theme, RadioStyleProps>((theme) => ({
   style: {
-    color: ({ color }) => (color ? color : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    color: ({ color }) => (color ? color : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   selected: {

diff --git a/...descriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx b/...descriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx
@@ -21,11 +21,11 @@ import { SelectWidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles<Theme, SelectStyleProps>((theme) => ({
   style: {
-    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : 'inherit'),
-    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : null),
+    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   selected: {

diff --git a/...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx b/...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx
@@ -20,11 +20,11 @@ import { TextareaWidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles<Theme, TextfieldStyleProps>((theme) => ({
   style: {
-    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : 'inherit'),
-    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : null),
+    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   selected: {

diff --git a/...criptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextfieldWidget.tsx b/...criptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextfieldWidget.tsx
@@ -20,11 +20,11 @@ import { TextfieldWidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles<Theme, TextfieldStyleProps>((theme) => ({
   style: {
-    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : 'inherit'),
-    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : null),
+    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   selected: {

diff --git a/...tioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActionWidget.tsx b/...tioneditors/frontend/sirius-components-formdescriptioneditors/src/ToolbarActionWidget.tsx
@@ -14,13 +14,13 @@ import { useMutation } from '@apollo/client';
 import { Selection, ServerContext, ServerContextValue, Toast } from '@eclipse-sirius/sirius-components-core';
 import {
   ButtonStyleProps,
-  getTextDecorationLineValue,
   GQLButton,
   GQLToolbarAction,
   PropertySectionContext,
+  getTextDecorationLineValue,
 } from '@eclipse-sirius/sirius-components-forms';
 import Button from '@material-ui/core/Button';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { Theme, makeStyles } from '@material-ui/core/styles';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { deleteToolbarActionMutation, moveToolbarActionMutation } from './FormDescriptionEditorEventFragment';
 import {
@@ -41,16 +41,16 @@ const useStyles = makeStyles<Theme, ButtonStyleProps>((theme) => ({
     lineHeight: 1.25,
     backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : theme.palette.primary.light),
     color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'white'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     '&:hover': {
       backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : theme.palette.primary.main),
       color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'white'),
-      fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-      fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-      fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+      fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+      fontStyle: ({ italic }) => (italic ? 'italic' : null),
+      fontWeight: ({ bold }) => (bold ? 'bold' : null),
       textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     },
   },
@@ -59,16 +59,16 @@ const useStyles = makeStyles<Theme, ButtonStyleProps>((theme) => ({
     lineHeight: 1.25,
     backgroundColor: theme.palette.secondary.light,
     color: 'white',
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     '&:hover': {
       backgroundColor: theme.palette.secondary.main,
       color: 'white',
-      fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-      fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-      fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+      fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+      fontStyle: ({ italic }) => (italic ? 'italic' : null),
+      fontWeight: ({ bold }) => (bold ? 'bold' : null),
       textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     },
   },

diff --git a/...ges/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx b/...ges/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx
@@ -37,16 +37,16 @@ const useStyle = makeStyles<Theme, ButtonStyleProps>((theme) => ({
   style: {
     backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : theme.palette.primary.light),
     color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'white'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     '&:hover': {
       backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : theme.palette.primary.main),
       color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'white'),
-      fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-      fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-      fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+      fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+      fontStyle: ({ italic }) => (italic ? 'italic' : null),
+      fontWeight: ({ bold }) => (bold ? 'bold' : null),
       textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     },
   },

diff --git a/...orms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx b/...orms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx
@@ -18,10 +18,10 @@ import { PropertySectionLabel } from './PropertySectionLabel';
 
 const useStyle = makeStyles<Theme, LabelStyleProps>(() => ({
   style: {
-    color: ({ color }) => (color ? color : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    color: ({ color }) => (color ? color : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
 }));

diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/LinkPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/LinkPropertySection.tsx
@@ -18,10 +18,10 @@ import { LinkPropertySectionProps, LinkStyleProps } from './LinkPropertySection.
 
 const useStyle = makeStyles<Theme, LinkStyleProps>(() => ({
   style: {
-    color: ({ color }) => (color ? color : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    color: ({ color }) => (color ? color : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   propertySectionLabel: {

diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx
@@ -95,10 +95,10 @@ const useListPropertySectionStyles = makeStyles<Theme, ListStyleProps>((theme) =
     },
   },
   style: {
-    color: ({ color }) => (color ? color : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    color: ({ color }) => (color ? color : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
     overflow: 'hidden',
     textOverflow: 'ellipsis',

diff --git a/...orms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx b/...orms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx
@@ -36,11 +36,11 @@ import { getTextDecorationLineValue } from './getTextDecorationLineValue';
 
 const useStyle = makeStyles<Theme, MultiSelectStyleProps>((theme) => ({
   style: {
-    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : 'inherit'),
-    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : null),
+    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   icon: {

diff --git a/...ages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx b/...ages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx
@@ -77,10 +77,10 @@ const useRadioPropertySectionStyles = makeStyles<Theme, RadioStyleProps>(() => (
     flexDirection: 'row',
   },
   style: {
-    color: ({ color }) => (color ? color : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    color: ({ color }) => (color ? color : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
 }));

diff --git a/...ges/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx b/...ges/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx
@@ -33,11 +33,11 @@ import { getTextDecorationLineValue } from './getTextDecorationLineValue';
 
 const useStyle = makeStyles<Theme, SelectStyleProps>((theme) => ({
   style: {
-    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : 'inherit'),
-    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : 'inherit'),
-    fontSize: ({ fontSize }) => (fontSize ? fontSize : 'inherit'),
-    fontStyle: ({ italic }) => (italic ? 'italic' : 'inherit'),
-    fontWeight: ({ bold }) => (bold ? 'bold' : 'inherit'),
+    backgroundColor: ({ backgroundColor }) => (backgroundColor ? backgroundColor : null),
+    color: ({ foregroundColor }) => (foregroundColor ? foregroundColor : null),
+    fontSize: ({ fontSize }) => (fontSize ? fontSize : null),
+    fontStyle: ({ italic }) => (italic ? 'italic' : null),
+    fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
   icon: {