How to Apply Mendix Styles to a React Component?
0
I'm working on a Mendix project and have developed a custom React widget. I'm trying to ensure that my widget (based on text only) matches the style of the rest of the Mendix application. Could anyone advise on how I can integrate Mendix CSS styles with my widget? Specifically, I'm looking to inherit styles such as font and color settings that are used in standard Mendix widgets. I've noticed classes like mx-text in the Mendix theme files and I'm wondering if I can directly use these classes, or if there are better approaches to ensure consistent styling. Additionally, if there are any tips for importing Mendix CSS files directly into my React project or any common practices around this, I would greatly appreciate your insights.
asked
Łukasz Walczak
3 answers
1
<propertyGroup caption="Styles">
<property key="color" type="string" required="false">
<caption>Text Color</caption>
<description/>
</property>
<property key="size" type="string" required="false">
<caption>Text Size</caption>
<description/>
</property>
</propertyGroup>You can use xml to create a styling tab in your mendix widget customization popup.
then you can apply styling in your text.
<p style={{color:props.color,fontSize:props.size}}>Hello world</p>And Another way
You can find apperance tab in your widget. You can add style and class name in your widget.
<p style={props.style} className={props.class}>Hello world</p>Hope this will help you.
Thanks.
answered
Sukhvindra Singh
0
Or how to have this in my string component :)
I want to allow the user to set, for example, the same "small" text size as in the text widget
answered
Łukasz Walczak
0
"Your_widget_id": [
{
"name": "Size",
"type": "ToggleButtonGroup",
"description": "Make the text smaller or larger.",
"options": [
{
"name": "Small",
"icon": "Atlas_Core.Atlas.resize-small",
"class": "text-small"
},
{
"name": "Large",
"icon": "Atlas_Core.Atlas.resize-full",
"class": "text-large"
}
]
},
{
"name": "Weight",
"oldNames": ["Font Weight"],
"type": "ToggleButtonGroup",
"description": "Emphasize the text with a heavier or lighter font weight",
"options": [
{
"name": "Light",
"class": "text-light"
},
{
"name": "Normal",
"class": "text-normal"
},
{
"name": "Semibold",
"class": "text-semibold"
},
{
"name": "Bold",
"class": "text-bold"
}
]
},
{
"name": "Color",
"type": "ColorPicker",
"description": "Change the color of text.",
"options": [
{
"name": "Header color",
"class": "text-header",
"preview": "--font-color-header"
},
{
"name": "Detail color",
"class": "text-detail",
"preview": "--font-color-detail"
},
{
"name": "Brand Primary",
"oldNames": ["Primary"],
"class": "text-primary",
"preview": "--brand-primary"
},
{
"name": "Brand Secondary",
"oldNames": ["Default", "Brand Default"],
"class": "text-secondary",
"preview": "--font-color-default"
},
{
"name": "Brand Success",
"oldNames": ["Success"],
"class": "text-success",
"preview": "--brand-success"
},
{
"name": "Brand Warning",
"oldNames": ["Warning"],
"class": "text-warning",
"preview": "--brand-warning"
},
{
"name": "Brand Danger",
"oldNames": ["Danger"],
"class": "text-danger",
"preview": "--brand-danger"
},
{
"name": "White",
"class": "text-white",
"preview": "white"
}
]
},
{
"name": "Alignment",
"type": "ToggleButtonGroup",
"description": "Align the text.",
"options": [
{
"name": "Left",
"icon": "Atlas_Core.Atlas.text-align-left",
"class": "text-left d-block"
},
{
"name": "Center",
"icon": "Atlas_Core.Atlas.text-align-center",
"class": "text-center d-block"
},
{
"name": "Right",
"icon": "Atlas_Core.Atlas.text-align-right",
"class": "text-right d-block"
}
]
},
{
"name": "Letter case",
"oldNames": ["Transform"],
"type": "ToggleButtonGroup",
"description": "Change the letter case of the text.",
"options": [
{
"name": "lower",
"oldNames": ["Lowercase"],
"class": "text-lowercase"
},
{
"name": "UPPER",
"oldNames": ["Uppercase"],
"class": "text-uppercase"
},
{
"name": "Capitalize",
"class": "text-capitalize"
}
]
},
{
"name": "Wrap options",
"type": "ToggleButtonGroup",
"description": "Break long words and sentences into multiple lines.",
"options": [
{
"name": "Wrap",
"class": "text-break"
},
{
"name": "No wrap",
"class": "text-nowrap",
"oldNames": ["No Wrap"]
}
]
}
]Paste this above code in design-properties.json file, File path :- D:\Mendix\OQLLearning-main\themesource\oqllearning\web where OQLLearning is my app name.
Make sure you replace widget id in given above json object.
You can find widget id in {widgetname}.xml file
In my case this is my widget id :- resilientitservices.adaptivedropdown.AdaptiveDropdown.
Hope this will help you.
Thanks.
answered
Sukhvindra Singh