0
222
ViewsCómo hacer que una parte del texto de la lista de selección esté en negrita y alguna fuente normal en React
Tengo que crear una lista de selección para mostrar algún producto en una selección. La lista debe mostrar el nombre del producto, pero debe haber un conteo en negrita como este: 
Lo que he intentado es crear una matriz de productos y empujar mi producto junto con el producto y contar así:
productInformation.push(currentProdName + " (" + cnt + " Product" + ")");
Después de eso, lo mapeo a json y lo vinculo a una lista de selección como esta:
var jsonProducts = productInformation.map(function (key, value) { return { value: key, label: key } }); <Select id="productName" name="productName" options={jsonProducts} onChange={onSelectChange} placeholder={"All Products ("+supplierProducts.length + ")"} ref={productInputRef} styles={{menu: provided => ({ ...provided, zIndex: 9999 }) }} /> Pero al hacerlo de esta manera, obtengo un resultado como este: 
¿Cómo puedo hacer que el recuento y el texto del producto estén en negrita en esto?
3 answers
Answer question0
Como está mapeando jsonProducts de la matriz productInformation , sugeriría
let content = (<div >{ProductName}<b> {" (" + Count+ " Product" + ") "}</b></div>); productInformation.push(content);ahora mapéalo como es
var jsonProducts = productInformation.map(function (key, value) { return { value: key, label: key } });0
Estoy un poco fuera de mi área de especialización aquí en MUI y React, pero algo como: (tenga en cuenta que no tenía acceso a su objeto JSON/JavaScript original para el p.count aquí, pero tal vez pueda trabajar con esto:
<CustomSelect> <StyledOption value={}>"All Products ({supplierProducts.length})"</StyledOption> {jsonProducts.map((p) => ( <StyledOption value={c.value}> {p.label} <span style="font-weight:bold;">({p.count}) Products</span> </StyledOption> ))} </CustomSelect>Referencia: https://mui.com/components/selects/
0
Importe el " MenúItem " de la biblioteca Mui y utilícelo como lo haría con cualquier otra etiqueta.
Pero antes deberías limpiar ciertas partes de tu código antes
productInformation.push({currentProdName, cnt}); var jsonProducts = productInformation.map(function (prod) { return <MenuItem value={prod.currentProdName+ " (" + prod.cnt + " Product" + ")"}>{prod.currentProdName}<b> { "(" + prod.cnt + " Product" + ")"}</b></MenuItem> }); <Select id="productName" name="productName" onChange={onSelectChange} placeholder={"All Products ("+supplierProducts.length + ")"} ref={productInputRef} styles={{menu: provided => ({ ...provided, zIndex: 9999 }) }} > {jsonProducts} </Select> Como puede ver, deberá completar los datos en MenuItem y luego agregar el objeto a Select.
Cambié la forma en que la información se inserta en la matriz de información del producto (para un mejor control)
Nota: eliminé jsonProducts de las opciones y en el interior de la etiqueta Seleccionar .